Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom Styling on <ng-content> in angular2 not working ?

Tags:

angular

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

like image 511
Pardeep Jain Avatar asked Jun 11 '16 11:06

Pardeep Jain


2 Answers

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.

like image 62
Thierry Templier Avatar answered Oct 04 '22 05:10

Thierry Templier


::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

like image 38
Günter Zöchbauer Avatar answered Oct 04 '22 07:10

Günter Zöchbauer