Skip to main content

angular material - How to change Slide toggle checked color

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    :host ::ng-deep
      .mat-slide-toggle.mat-checked:not(.mat-disabled)
      .mat-slide-toggle-bar {
        background-color: MediumSeaGreen ;
    }

    :host ::ng-deep
    .mat-slide-toggle.mat-checked:not(.mat-disabled)
    .mat-slide-toggle-thumb {
      background-color: SeaGreen ;
    }
  `]
})


export class AppComponent { }
app.component.html 

<h2 style="padding-top:25px; padding-bottom:25px;">
  Angular Material - How to change Slide toggle checked color
</h2>


<h3>Checked status : {{slideToggle.checked}}</h3>

<mat-slide-toggle #slideToggle>
    Allow file access
</mat-slide-toggle>
app.module.ts [import] 

import { MatSlideToggleModule } from '@angular/material/slide-toggle'
More Angular tutorials
Labels: