How to Add Angular Material 13 Slide Toggle in Angular

In this article, we will reveal how to create a simple slide toggle button in the angular application. To implement slide toggle component we will take help of angular material library.

The toggle() method connects two or more than two functions to handle the state. It tracks the click event for the selected elements. When you click on the element, the first specified function invokes it; when clicking furthermore, the second function evokes it.

In this angular slide toggle example, we will achieve similar functionality by using the angular material slide toggle component.

Angular material provides the mat-slide-toggle property; the mat-slide-toggle allows on and off the control that can be triggered through clicking on the element.

Angular Material Slide Toggle Button Example

  • Step 1: Create Angular Project
  • Step 2: Install Material Library
  • Step 3: Build Material Modules File
  • Step 4: Add Slide Toggle in Component
  • Step 5: Change Slide Toggle Color
  • Step 6: Test App in Browser

Create Angular Project

You must have angular cli tool configured in your system, if you don’t have make sure to execute given command:

npm install -g @angular/cli

To create the new angular app use the ng new tag followed by your angular project’s name:

ng new ng-material-demo

Move into the application directory:

cd ng-material-demo

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, therefore, you need to update the compilerOptions and angularCompilerOptions in tsconfig.json file for disabling the strict mode:

{
   “strict”: false, 
   "noImplicitReturns": false 
   "strictTemplates": false
}

Install Material Library

Next, we need to run the following command, this command will install the material library in angular project.

ng add @angular/material

In order to setup material properly you have to choose the given options on your terminal window.

  1. Choose a prebuilt theme name or “custom” for a custom theme:

    You can choose from prebuilt material design themes or set up an extensible custom theme.

  2. Set up global Angular Material typography styles:

    Whether to apply the global typography styles to your application.

  3. Set up browser animations for Angular Material:

    Importing the BrowserAnimationsModule into your application enables Angular’s animation system. Declining this will disable most of Angular Material’s animations.

Get into the src/ directory and import material theme’s css link into the styles.scss file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Build Material Modules File

Create material.module.ts inside src/ folder, in this file we will import MatSlideToggleModule and also other material modules.

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { CdkAccordionModule } from '@angular/cdk/accordion';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  exports: [
    A11yModule,
    CdkAccordionModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    OverlayModule,
    PortalModule,
    ScrollingModule,
  ],
})

export class MaterialModule {}

We need to import and define the MaterialModule, CUSTOM_ELEMENTS_SCHEMA, FormsModule, and ReactiveFormsModule modules inside the app.module.ts file.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../material.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class AppModule {}

Add Slide Toggle in Component

You have to add the mat-slide-toggle property with an opening and closing tag to handle the on and off behavior. You have to add this code to the angular HTML template.

<mat-slide-toggle>Toggle Me!</mat-slide-toggle>

Change Slide Toggle Color

You can very easily change the slide toggle color using either primary, accent and warn colors.

<mat-slide-toggle color="primary">Toggle with Cool Color!</mat-slide-toggle>

Test App in Browser

To test the slide toggle feature in angular app you have to run the application.

ng serve

Open the url on the browser and see little slide toggle in the action.

http://localhost:4200

How to Add Angular Material 13 Slide Toggle in Angular

Conclusion

In this quick post, we demonstrated how to integrate the slide toggle button in the angular app, and we learned how to use the mat-slide-toggle directive to handle the toggle behavior.

Material slide toggle is compatible with both the angular forms api such as FormsModule and ReactiveFormsModule.

You can change the mat-slide-toggle color using the material theme’s predefined colors such as accent, primary, and warn.