13

I am trying to style <ng-content> using inline css but seems style does't work on ng-content, i have to do something else for styling ? 

<ng-content class="red"></ng-content> <p class="red">hello</p>

here class red works on p but not on

Working Example

Pardeep Jain
  • 84,110
  • 37
  • 165
  • 215

4 Answers4

8

::content is ignored.

This comes closes

You can use the ::content selector

styles: ['.red {color:red} :host >>> upper {color:green}']

or

styles: ['.red {color:red} :host >>> * {color:green}']

And if there are fellow LESS users, seems that LESS compiler dislikes >>> syntax, so you need to add an alias for that, eg. @deep: ~">>>"; and then use that like @{deep} { /* your deep styles here */ }

See also this discussion https://github.com/angular/angular/issues/7400#issuecomment-246922468

You can use the ::content selector

styles: ['.red {color:red} ::content >>> upper {color:green}']

or

styles: ['.red {color:red} ::content >>> * {color:green}']

According to the web components spec ::content should be enough and >>> should not be required but the styles were not applied without it.

Plunker example

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • waoo great, but what if i have multiple `ng-content` i mean named `ng-contents` than how can i apply style to them ? can you please provide any link where i can read about this `::content` and `>>>` ? – Pardeep Jain Jun 12 '16 at 03:34
  • I explained a bit in http://stackoverflow.com/questions/32853924/angular-2-how-to-style-host-element-of-the-component/36175093#36175093 and http://stackoverflow.com/questions/34542143/load-external-css-style-into-angular-2-component/34963135#34963135. Angular emulates the shadow DOM selectors with a few limitations. – Günter Zöchbauer Jun 12 '16 at 09:33
  • I guess you need to wrap `` like `
    ` and then use it like `.wrapper1 ::content >>> upper`.     – Günter Zöchbauer Jun 12 '16 at 09:35
  • is there any way to know wether the content is there or not ina component? – Mukul Jayaprakash Aug 24 '17 at 11:22
  • 1
    @MukulJayaprakash something like https://stackoverflow.com/questions/43718456/in-angular2-how-can-i-detect-is-there-any-ng-content – Günter Zöchbauer Aug 24 '17 at 11:34
4

In fact, it's because is replaced by the input content. The element doesn't exist in the in-memory DOM.

Regarding your sample, when using upper:

<upper>Some text</upper>

that has the following template:

<ng-content class="red"></ng-content> <p class="red">hello</p>

You will have this in the DOM:

<upper _nghost-dks-2="">
  Some text <p _ngcontent-dks-2="" class="red">hello</p>
</upper>

For this reason, you can't use class="red" on ng-content.

Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
0

Try adding your css into the parent css file: app/src/style.css

NOT into your component's styleUrls's css file (which you included inside the component like this styleUrls: ['design.css'])

Anand Rockzz
  • 6,072
  • 5
  • 64
  • 71
-1

Just wrap the ng-content and use css to select inside it?

<div class="red"><ng-content></ng-content></div>

CSS:

.red > * {
    color: red;
}
wswoodruff
  • 213
  • 3
  • 7