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?

Answer 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;    
}

Answer 2

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
})