Modify CSS of parent class

Question

I have Component A with the following html:

<main>
  <div class="wrapper animated fadeIn">
    <div class="card card-dynamic-height">
      <ac-daily-entry-table *ngIf="employee" [employeeEmail]="employee.email"></ac-daily-entry-table>
    </div>
  </div>
</main>

It has DailyEntryTableComponent as its child. I would like to find a way to modify the css of Component A inside DailyEntryTableComponent like this for example:

somethingChanged(something) {
  //modify the css of the class wrapper from my parent here
}

Is something like this possible?

StepUp · Accepted Answer · 2019-11-21 13:17:02Z

1

You can create Output property and then when it changes update the CSS property using [class.yourClassName]. Let me show an example:

daily-entry-table.component.html:

@Output() change = new EventEmitter();
onClick() {
    this.change.emit({newValue: true } );
}

and then it can be used like this in Component A:

<main>
  <div class="wrapper animated fadeIn">
    <div class="card card-dynamic-height"
      [class.yourClass]="applyStyle">
      <ac-daily-entry-table *ngIf="employee" 
        (change)="onFooChanged($event)"
        [employeeEmail]="employee.email"></ac-daily-entry-table>
    </div>
  </div>
</main>

componentA.component.ts:

applyStyle = false;

onFooChanged(event) {
    this.applyStyle = true;    
}

answered Nov 21, 2019 at 13:17

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user7974621 · Accepted Answer · 2019-11-21 13:17:36Z

1

Try adding encapsulation: ViewEncapsulation.None in your child's @Component to disable encapsulation, this should allow you to override the parent's CSS.

Example:

@Component({
  templateUrl: './component-a.component.html',
  styleUrls: ['./component-a.component.css'],
  encapsulation: ViewEncapsulation.None
})

answered Nov 21, 2019 at 13:17

user7974621

Collectives™ on Stack Overflow

Modify CSS of parent class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related