Change text style with mat-slide-toggle

Question

How can I change the style of a text using Ang-Material-2's mat-slide-toggle?

<mat-slide-toggle [color]="primary" [checked]="true">Slide me</mat-slide-toggle>
<h3>Text</h3>

Answer 1

Bind a class or style property to the <h3> element based on the toggle's state:

<mat-slide-toggle #toggle [color]="primary" [checked]="true">Slide me</mat-slide-toggle>
<h3 [ngClass]="{'primary-color' : toggle.checked}">Text</h3>

CSS:

.primary-color {
    color: red; // you should use theming to access the theme's primary color
}