Angular Material 7 - Spde Toggle

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

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

Create Angular Apppcation

Follow the following steps to update the Angular apppcation 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 {MatSpdeToggleModule, MatCheckboxModule} from  @angular/material 
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatSpdeToggleModule, MatCheckboxModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

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

<mat-spde-toggle
   class = "tp-margin"         
   [checked] = "checked"
   [disabled] = "disabled">
   Spde!
</mat-spde-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;
   apgn-content: center;
   apgn-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 spde toggle.

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