Angular view encapsulation with external libraries

Question

I use an external component in my component. I want to do some styling on this external component. Because of Angular View Encapsulation all css I define in my component are not propagated to this external component which is used in my html-template. In order to enable this propagation I set

encapsulation: ViewEncapsulation.None

That works. But then my css is applied to my whole project not to a particular component only. What I need is to tell Angular somehow: "Apply this css to this component and all child components of it, also external ones". Is that possible at all?

Answer 1

You can define this in your css. However, be carefull as ::ng-deep is quite a powerfull combinator and can cause problems if not used correctly. Also from the Angular website:

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular.

CSS:

 :host { color: red; }
 
 :host ::ng-deep parent {
   color:blue;
 }
 :host ::ng-deep child{
   color:orange;
 }
 :host ::ng-deep child.class1 {
   color:yellow;
 }
 :host ::ng-deep child.class2{
   color:pink;
 }

HTML:

  Angular2                                //red
  <parent>                                //blue
      <child></child>                     //orange
      <child class="class1"></child>      //yellow
      <child class="class2"></child>      //pink
  </parent>