Apply CSS Style inside ng-content

Question

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

Try adding encapsulation: ViewEncapsulation.Native to your embed component — Ravi Teja Vattem, Nov 11 '19 at 12:30

Santosh Shinde · Accepted Answer · 2019-11-11T12:45:38.367

3

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

edited Nov 11 '19 at 12:45

answered Nov 11 '19 at 12:16

Santosh Shinde

1,206
10
16

It seems to work, but when I build in AOT I get the following error on '/deep/': An unhandled exception occurred: expected selector – panagulis72 Nov 11 '19 at 12:37
You declare global all your css component where only `.toBeColored` need to be set global – Wandrille Nov 11 '19 at 13:53

Wandrille · Answer 2 · 2019-11-11T13:51:33.857

1

You can't achieve that with a clean way.

A workaround would be to create global css :

:host {
 ...;
 ::ng-deep .toBeColored {
   color: pink;
 }
}

But it will be deprecated. See this issue

::ng-deep is going to hold the web record for long-lived deprecated API.

edited Nov 11 '19 at 13:51

answered Nov 11 '19 at 12:15

Wandrille

6,267
3
20
43

score 1 · Answer 3 · answered Nov 11 '19 at 12:35

1

Try adding encapsulation: ViewEncapsulation.Native to your embed component like

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-embed',
  templateUrl: './embed.component.html',
  styleUrls: ['./embed.component.scss'],
  encapsulation: ViewEncapsulation.Native
})
export class EmbedComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

answered Nov 11 '19 at 12:35

Ravi Teja Vattem

341
1
7

It seems to work but now I have the opposite problem, if in the I put some external styles (external to EmbedComponent) they are ignored – panagulis72 Nov 11 '19 at 12:44
can you give more details and update the stackblitz – Ravi Teja Vattem Nov 11 '19 at 12:47

score 1 · Answer 4 · answered May 17 '21 at 03:49

You should be able to apply the styles in the parent component that projects the content into the ng-content tag. The angular styles isolation appears to consider the content to be part of the component where the HTML is declared.

https://stackblitz.com/edit/angular-ivy-q9dn68

Apply CSS Style inside ng-content

4 Answers4