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
Add a comment |
4 Answers
::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.
answered Jun 11, 2016 at 13:54
Günter Zöchbauer
661k235 gold badges2.1k silver badges1.6k bronze badges
5 Comments
Pardeep Jain
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 >>> ?Günter Zöchbauer
I explained a bit in stackoverflow.com/questions/32853924/… and stackoverflow.com/questions/34542143/…. Angular emulates the shadow DOM selectors with a few limitations.
Günter Zöchbauer
I guess you need to wrap
<ng-content> like <div class="wrapper1"><ng-content></ng-content></div> and then use it like .wrapper1 ::content >>> upper.
Mukul Jayaprakash
is there any way to know wether the content is there or not ina component?
Günter Zöchbauer
@MukulJayaprakash something like stackoverflow.com/questions/43718456/…
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.
answered Jun 11, 2016 at 12:02
Thierry Templier
203k44 gold badges407 silver badges365 bronze badges
3 Comments
Pardeep Jain
so how can i style
ng-content ?Thierry Templier
You can't ;-) but you style elements in it... For example:
<upper><p class="red">Some text</p></upper>Pardeep Jain
already tried this but not suitable as per my requirement. btw thanks for answer.
Just wrap the ng-content and use css to select inside it?
<div class="red"><ng-content></ng-content></div> CSS:
.red > * { color: red; } 
1 Comment
tomasdev
Scoped component CSS does not work like this.
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'])
