Aug
10
Angular Material 7 – Slide Toggle ”; Previous Next 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 − Step Description 1 Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter. 2 Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged. 3 Compile and run the application to verify the result of the implemented logic. 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. Print Page Previous Next Advertisements ”;