Toggle Switch

Angular Bootstrap 5 Toggle Switch component

A switch is a simple component used for activating one of two predefined options. Commonly used as an on/off button.

Basic example

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Add mdbCheckbox directive to the input element to use all switch features. 




<!-- Default switch -->
<div class="form-check form-switch">
  <input
    mdbCheckbox
    class="form-check-input"
    type="checkbox"
    id="flexSwitchCheckDefault"
  />
  <label class="form-check-label" for="flexSwitchCheckDefault"
    >Default switch checkbox input</label
  >
</div>
<!-- Checked switch -->
<div class="form-check form-switch">
  <input
    mdbCheckbox
    class="form-check-input"
    type="checkbox"
    id="flexSwitchCheckChecked"
    [checked]="true"
  />
  <label class="form-check-label" for="flexSwitchCheckChecked"
    >Checked switch checkbox input</label
  >
</div>
<!-- Default disabled switch -->
<div class="form-check form-switch">
  <input
    mdbCheckbox
    class="form-check-input"
    type="checkbox"
    id="flexSwitchCheckDisabled"
    [disabled]="true"
  />
  <label class="form-check-label" for="flexSwitchCheckDisabled"
    >Disabled switch checkbox input</label
  >
</div>
<!-- Checked disabled switch -->
<div class="form-check form-switch">
  <input
    mdbCheckbox
    class="form-check-input"
    type="checkbox"
    id="flexSwitchCheckCheckedDisabled"
    [checked]="true"
    [disabled]="true"
  />
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled"
    >Disabled checked switch checkbox input</label
  >
</div>

Toggle Switch - API

Import

import { MdbCheckboxModule } from 'mdb-angular-ui-kit/checkbox';
…
@NgModule ({
  ...
  imports: [MdbCheckboxModule],
  ...
})

Inputs

Name Type Default Description
checked Boolean false Changes switch checked state
disabled Boolean false Changes switch disabled state
value any - Changes switch value

Methods

Name Description Example
toggle Manually toggle a switch switch.toggle() 
<div class="form-check form-switch">
  <input
    mdbCheckbox
    class="form-check-input"
    type="checkbox"
    value=""
    id="flexSwitchCheckDefault"
  />
  <label class="form-check-label" for="flexSwitchCheckDefault"> Default switch </label>
</div>
import { Component, ViewChild, OnInit } from '@angular/core';
import { MdbCheckboxDirective } from 'mdb-angular-ui-kit/checkbox';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  @ViewChild(MdbCheckboxDirective, { static: true }) switch!: MdbCheckboxDirective;

  ngOnInit(): void {
    this.switch.toggle();
  }
}