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>