Angular apply CSS to ::ng-deep elements conditionally

I've an component with template

HTML


<mt-select type="multi" hideSelected="true" [ngClass]="test ? 'bgblue' : 'bgGreen'" [readonly]="!isProdUser" appendTo="body" [options]="searchResponse" openTagsOnHover [(ngModel)]="userSelection" minLength="2" [viewFields]="['label']" uid="label" (search)="onUserSearch($event)">
</mt-select>


enter image description here

now there's one variable test in TS file which we either get true or false. So based on this variable value I need to apply some background color. By the way I'm using SCSS css preprocessor.

But I need to apply the css to the class mentioned in the image which is kind of hidden and can only be accessed using ::ng-deep.

I'm not sure how do I apply style to the hidden element with class lmn-select-input based on the variable value test.

Continue reading...