How to replace css class of angular component

Question

my questions is very simple, I have a angular child component that use a following CSS class:

.noUi-connect{
  background:#294664;
}

My questions is: how a parent component can change a css class of a child component, which is a black box for me, I can not directly access its css?

I tried the following in my parent CSS class component, but it does not work:

:host.noUi-connect{
  background:#294664!important;
}

Many thanks!

Answer 1

You have to tell Angular to explicitly break its normal view encapsulation

:host ::ng-deep .noUi-connect {
    background:#294664!important;
}

This will affect ALL .noUi-connect within the host regardless of how deep they are - IE it will behave almost like a vanilla CSS style.

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

---

As noted in the Angular documentaion, this is (allegedly) being deprecated and will eventually be removed. There is a lot of ongoing discussion about this, but currently it is still the recommended way to solve this problem - since there is no alternative method.