Hello Devs, 

In this tutorial, we will learn Angular 9 Material Slide Toggle Example | Angular mat-slide-toggle

In this section, you will create material slide toggle button in angular 6, angular 7, angular 8 and angular 9.

Follow this step by step guide below. 



Create New App

ng new app-material



Add Material Design

ng add @angular/material

Cmd like bellow:

Installing packages for tooling via npm.

Installed packages for tooling via npm.

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     

   [ Preview: https://material.angular.io?theme=indigo-pink ]

? Set up global Angular Material typography styles? Yes

? Set up browser animations for Angular Material? Yes


Basic Material Slider Toggle Button


src/app/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} from '@angular/material/slide-toggle';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    MatSlideToggleModule,

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }


src/app/app.component.html

<h4>Angular Material Slide Toggle Example</h4>

   

<mat-slide-toggle>User Status:</mat-slide-toggle>



May this example help you.