Slide toggle

API reference for Angular Material slide-toggle

import {MatSlideToggleModule} from '@angular/material/slide-toggle';

Represents a slidable "switch" toggle that can be moved between on and off.

Selector: mat-slide-toggle

Exported as: matSlideToggle

Name	Description
@Input('aria-label') `ariaLabel: string \| null`	Whether the slide-toggle element is checked or not Used to set the aria-label attribute on the underlying input element.
@Input('aria-labelledby') `ariaLabelledby: string \| null`	Used to set the aria-labelledby attribute on the underlying input element.
@Input() `checked: boolean`	Whether the slide-toggle element is checked or not
@Input() `color: ThemePalette`	Theme color palette for the component.
@Input() `disableRipple: boolean`	Whether ripples are disabled.
@Input() `disabled: boolean`	Whether the component is disabled.
@Input() `id: string`	A unique id for the slide-toggle input. If none is supplied, it will be auto-generated.
@Input() `labelPosition: 'before' \| 'after'`	Whether the label should appear after or before the slide-toggle. Defaults to 'after'
@Input() `name: string \| null`	Name value will be applied to the input element if present
@Input() `required: boolean`	Whether the slide-toggle is required.
@Output() `change: EventEmitter<MatSlideToggleChange>`	An event will be dispatched each time the slide-toggle changes its value.
`inputId: string`	Returns the unique id for the visual hidden input.

focus
Focuses the slide-toggle.

toggle
Toggles the checked state of the slide-toggle.

Change event object emitted by a MatSlideToggle.

Name	Description
`checked: boolean`	The new `checked` value of the MatSlideToggle.
`source: MatSlideToggle`	The source MatSlideToggle of the event.

Contents