Custom style in <ng-content> in angular2 not working?

Question

I am trying to create a <ng-content> style using inline css, but it seems that the style does not work on ng content, do I need to do something to style it?

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

here the red class works on p , but not on p

Working example

Answer 1

::content ignored.

It is closing

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 other LESS users, it seems that the LESS compiler does not like >>> , so you need to add an alias for this, for example. @deep: ~">>>"; and then use it like @{deep} { /* your deep styles here */ }

See also 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}'] 

Strike>

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

Plunger example

Answer 2

In fact, this is because it is being replaced by input content. An item does not exist in the DOM in memory.

As for your sample, when using upper :

 <upper>Some text</upper> 

which has the following pattern:

 <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 cannot use class="red" on ng-content .

Answer 3

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

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

Answer 4

Just wrap the contents of ng and use css to select inside it?

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

CSS

 .red > * { color: red; }