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" | "warn" | The color palette of the slide-toggle | | 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>