Slide toggle

API for 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
Properties
Name Description
@Input('aria-label')

ariaLabel: string | null

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.
@Output()

dragChange: EventEmitter<void>

An event will be dispatched each time the slide-toggle is dragged. This event is always emitted when the user drags the slide toggle to make a change greater than 50%. It does not mean the slide toggle's value is changed. The event is not emitted when the user toggles the slide toggle to change its value.
@Output()

toggleChange: EventEmitter<void>

An event will be dispatched each time the slide-toggle input is toggled. This event is always emitted when the user toggles the slide toggle, but this does not mean the slide toggle's value has changed. The event does not fire when the user drags to change the slide toggle value.

defaults: MatSlideToggleDefaultOptions

inputId: string

Returns the unique id for the visual hidden input.
Methods
focus

Focuses the slide-toggle.
toggle

Toggles the checked state of the slide-toggle.

Change event object emitted by a MatSlideToggle.

Properties
Name Description

checked: boolean

The new checked value of the MatSlideToggle.

source: MatSlideToggle

The source MatSlideToggle of the event.

Default mat-slide-toggle options that can be overridden.

Properties
Name Description

disableDragValue: boolean

Whether drag action triggers value changes in slide toggle.

disableToggleValue: boolean

Whether toggle action triggers value changes in slide toggle.

Injection token to be used to override the default options for mat-slide-toggle.

const MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS: InjectionToken<MatSlideToggleDefaultOptions>;