The <mat-slide-toggle>, an Angular Directive, is used as a on/off switch with material design styling and animation capabilities.

In this chapter, we will showcase the configuration required to draw a slide toggle control using Angular Material.

Create Angular Application

Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter −

Following is the content of the modified module descriptor app.module.ts.

import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';
import { AppComponent } from ''./app.component'';
import {BrowserAnimationsModule} from ''@angular/platform-browser/animations'';
import {MatSlideToggleModule, MatCheckboxModule} from ''@angular/material''
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatSlideToggleModule, MatCheckboxModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Following is the content of the modified HTML host file app.component.html.

<mat-slide-toggle
   class = "tp-margin"         
   [checked] = "checked"
   [disabled] = "disabled">
   Slide!
</mat-slide-toggle>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "checked">Checked</mat-checkbox>
   <mat-checkbox class = "tp-margin" [(ngModel)] = "disabled">Disabled</mat-checkbox>
</section>

Following is the content of the modified CSS file app.component.css.

.tp-section {
   display: flex;
   align-content: center;
   align-items: center;
   height: 60px;
}
.tp-margin {
   margin: 30px;
}

Following is the content of the modified ts file app.component.ts.

import { Component } from ''@angular/core'';
@Component({
   selector: ''app-root'',
   templateUrl: ''./app.component.html'',
   styleUrls: [''./app.component.css'']
})
export class AppComponent {
   title = ''materialApp''; 
   disabled = false;
   checked = false; 
}

Result

Verify the result.

Details

• As first, we”ve created two check boxes using mat-checkbox and bind them using ngModel with variables. These properties will be used to handle the slide toggle.

• Then, we”ve created the slide toggle and showcased its various attributes bound with variables in .ts file.