Is it possible to combine [ngStyle] and ::ng-deep?

Question

I try to build an application that can be themed completely at runtime. Therefore i want to set global settings like font-size, color, background-color etc. on my root app.component. For now i do it with predefined CSS classes:

     // CSS
    .font-size-16::ng-deep { font-size: 16px; }

    // TS
    fontSizeClass = 'font-size-16'

    // HTML
    <div [ngClass]="fontSizeClass"></div>

Changing the fontSizeClass string to another class works for deep styling my application. But this solution is not dynamic at all. What i actually want is to set the font-size via [ngStyle] but keep the ng::deep functionality, too.

Is that possible?

And are there reasons to not implement theming completely with JavaScript and Redux?

Thanks in advance!

Answer 1

Try this using angular material radio button if you want to make the border of the radio buttons => transparent

1. in HTML:

   [ngClass]="{'**transparentBorder**': "--Here yours condition---"}"
   

2. in css:

a. you add the transparentBorder (that we used in HTML) to: b. add ::ng-deep at the beginning of the CSS c. in the Chrome Dev Tools finds all the classes that the Angular material used in this case, there are 2 option: 1. if the radio button is checked, 2. is unchecked

result:

this is the classes when the radio button is checked we need to add our class transparent-border to angular material classes.

::ng-deep .mat-radio-button.**transparentBorder**.mat-primary.mat-radio-checked .mat-radio-outer-circle {
  border-color: transparent;
}

this is the classes when the radio button is unchecked

::ng-deep .mat-radio-button.**transparentBorder**.mat-primary .mat-radio-outer-circle {   border-color: transparent; }

good luck