Angular binding not working when the CSS class is nested within an ::ng-deep block

I want to conditionally add a class to my element. This is my css file:

::ng-deep .a {
&.b{
background-color: red;
}
//other styles
}


When I add <div class="a b"> I can see the classes applied but when I modify this to accept conditional class <div class="a" [class.b]="true"> I cannot see class b applied.

I have tried modifying this to use [ngClass], still no luck.

Continue reading...