Angular Material Slide Toggle Example

By Hardik Savani | March 20, 2020 | Category : Angular


This tutorial shows you angular material slide toggle. Here you will learn angular material slide-toggle. you will learn angular material mat-slide-toggle. i explained simply step by step angular material mat slide toggle. Follow bellow tutorial step of slide toggle angular material example.

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, angular 9 and angular 10.

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: ]

? 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:


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';


declarations: [



imports: [





providers: [],

bootstrap: [AppComponent]


export class AppModule { }


<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...

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: