abcc6af Aug 19, 2016
66 lines (55 sloc) 1.72 KB


MdSlideToggle is a two-state control, which can be also called switch




Bound Properties

Name Type Description
disabled boolean Disables the slide-toggle
color "primary" | "accent" | "warn" The color palette of the slide-toggle
checked boolean Sets the value of the slide-toggle


Name Type Description
change boolean Event will be emitted on every value change.
It emits the new checked value.


A basic slide-toggle would have the following markup.

<md-slide-toggle [(ngModel)]="slideToggleModel">
  Default Slide Toggle

Slide toggle can be also disabled.

<md-slide-toggle disabled>
  Disabled Slide Toggle

The slide-toggle can be also set to checked without a ngModel

<md-slide-toggle [checked]="isChecked">
  Input Binding

You may also want to listen on changes of the slide-toggle
The slide-toggle always emits the new value to the event binding (change)

<md-slide-toggle (change)="printValue($event)">
  Prints Value on Change


A slide-toggle is default using the accent palette for its styling.

Modifying the color on a slide-toggle can be easily done, by using the following markup.

<md-slide-toggle color="primary">
  Primary Slide Toggle

The color can be also set dynamically by using a property binding.

<md-slide-toggle [color]="myColor">
  Dynamic Color