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

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.