cssangularsassangular2-ngcontent

Apply CSS Style inside ng-content

in an Angular application I have a component with <ng-content></ng-content>. I added the scss rules for content that will be put inside the ng-content, but they are ignored. I tried to solve using :host, but it doesn't work.

https://stackblitz.com/edit/angular-ewqhzj

Wrapper component:

<app-embed>
   <p>Hello world!</p><h1 class="toBeColored">toBeColored</h1>
</app-embed>

Styles in embed component:

:host {
  border: 5px solid red;
 padding: 15px;
 display: block;
 .toBeColored {
   color: pink;
 }
}

The problem is that the pink color of 'toBeColored' string is not set

Solution

  • Try this 

    :host ::ng-deep{
  border: 5px solid red;
  padding: 15px;
  display: block;
   .toBeColored {
    color: pink !important;
  }
}

    and remove encapsulation statement and try ti build

    encapsulation: ViewEncapsulation.Native