Angular 9 Material Slide Toggle Example | Angular mat-slide-toggle

Hello,

Here, i will show you slide toggle angular material example. it's simple example of slide toggle angular material. let’s discuss about angular material slide toggle. you can understand a concept of angular material slide-toggle. Alright, let’s dive into the steps.

I’m going to show you about angular material mat-slide-toggle reactive form. if you have question about angular material slide toggle button example then i will give simple example with solution.

We can create material slide toggle button in angular 6, angular 7, angular 8 and angular 9.

You can see bellow layout for demo:

Create New App

If you are doing example from scratch then You can easily create your angular app using bellow command:

ng new app-material

Add Material Design

Now in this step, we need to just install material design theme in our angular application. so let's add as like bellow:

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

Here, we will create very simple example. first we need to import MatSlideToggleModule for mat-slide-toggle material design. so let's update app.module.ts, app.component.ts and app.component.html.

Let's follow step:

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>

You can easily run by following command:

ng serve

I hope it can help you...