@material-git/slide-toggle v2.0.0-git.20160919

MdSlideToggle

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

Screenshots

<md-slide-toggle>

Bound Properties

Events

Examples

A basic slide-toggle would have the following markup.

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

Slide toggle can be also disabled.

<md-slide-toggle disabled>
  Disabled Slide Toggle
</md-slide-toggle>

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

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

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
</md-slide-toggle>

Theming

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
</md-slide-toggle>

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

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