@material-git/slide-toggle

MdSlideToggle

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

Screenshots

<md-slide-toggle>

Bound Properties

Name	Type	Description
disabled	boolean	Disables the slide-toggle
color	`"primary"	"accent"
checked	boolean	Sets the value of the slide-toggle

Events

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

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>