Style child component differently when it is in different parent components

Question

In an Angular 5 application, I want to style the child slightly different when it is inside different parent component list below.

E.g red background for card under listing component
green background for card under listing detail component

I want to know if I can do it through scss in the child component? Because I think it would be easier to trace when doing it inside the child component itself.

<listing>
  <card />
<listing/>
<listingDetail>
  <card />
</listingDetail>

Thanks.

KShewengger · Accepted Answer · 2018-11-24T13:54:14.037

You can use Angular's ng-deep if you want to affect the styles of its child components.

1.) On you ListingComponent, setup ng-deep and access the card container class

@Component({
  selector: 'listing',
  template: `<ng-content></ng-content>`,
  styles: [
    `
      :host ::ng-deep .card-container { background-color: red; }   // Keep in mind, to include :host which means this component as without it, this style will leak out affecting not only its child component class .card-container but also its siblings derived from another component
    `
  ]
})
export class ListingComponent {}

2.) On you ListingDetailComponent, setup ng-deep and access the card container class

@Component({
  selector: 'listing-detail',
  template: `<ng-content></ng-content>`,
  styles: [
    `
       :host ::ng-deep .card-container { background-color: green; }
    `
  ]
})
export class ListingDetailComponent {}

3.) On you CardComponent, supposedly you have a card container class

@Component({
  selector: 'card',
  template: `<div class="card-container">Hi I'm Card</div>`,
})
export class CardComponent {}

4.) On your AppComponent, same with your structure

<listing>
  <card></card>
</listing>

<listing-detail>
  <card></card>
</listing-detail>

Here's the StackBlitz demo link for your reference

OR If you want to control the styling from the child component, you can do so by specifying :host-context and the parent's class.

Example:

1.) Specify the parent class that we will use to access from our child component (card)

<listing class="list-parent">    
  <card></card>
</listing>

<listing-detail class="list-detail-parent">
  <card></card>
</listing-detail>

2.) On your child component (CardComponent), specify host-context on your styles. This way you can style your parent component in corresponds to their classes.

@Component({
  selector: 'card',
  template: `<div class="card-container">Hi I'm Card</div>`,
  styles: [
    `
      :host-context(.list-parent) { background-color: red; }

      :host-context(.list-detail-parent) { background-color: green; }

    `
  ]
})
export class CardComponent {}

Thanks a lot for your thorough explanation, but I want to do it in the child component which is the component in this case so that developer can notice that when they make changes on the card component — Kwinten, Nov 21 '18 at 07:15
@Kwinten had updated my answer in corresponds to styling your parent component inside the child component, hope it helps :) — KShewengger, Nov 22 '18 at 03:54
Seems like ::ng-deep is up for depreciation https://blog.angular-university.io/angular-host-context/ — nishchalpro, May 27 '20 at 08:44

Style child component differently when it is in different parent components

1 Answers1