Is there a way to use css in ng-content inside an Angular2 component?

css angular styles angular2-ngcontent
J.BizMai picture J.BizMai · Feb 23, 2017 · Viewed 17.6k times · Source

I tried to include css for children element included in a component via ng-content. It seems to be not implemented yet in Angular 2 or maybe someone has got a solution except to put css in a general stylesheet ?

app.component.ts

<comp-parent>
  <comp-child></comp-child>
</comp-parent>

compParent.component.html

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

compParent.component.css

.wrapper > comp-child {
   margin-right: 5px; <-- Not applied !!!
}

Answer

Vilmantas Baranauskas picture Vilmantas Baranauskas · Feb 23, 2017

You can use /deep/ (deprecated) or >>> or ::ng-deep selector:

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

E.g.: 

.wrapper ::ng-deep comp-child { ... }

Note that >>> seems to not work for projects based on angular-cli.

Related questions

Angular dynamic background images

In the html template I have this style with a dynamic image: <div style="background: url('/img/{{item.img}}'); width: 200px; height: 150px"></div> Which works in web browsers and android browser. However background …

Read More
angular2-cli gives @multi styles error

I started using angular2-cli recently and created a new project. I wanted to use bootstrap in my project hence I installed bootstrap and then wanted to import the bootstrap css file like it is shown in the the angular2…

Read More
How to add global style to angular 6/7 library

I was trying to add global styles in the same way like in angular app, but it totally does not work. My libraries' name is example-lib, so I added styles.css to /projects/example-lib/. I added styles in main angular.…

Read More