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
NameDescription
@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.

@Output()

dragChange: EventEmitter<void>

An event will be dispatched each time the slide-toggle is dragged. This event always fire when user drag the slide toggle to make a change that greater than 50%. It does not mean the slide toggle's value is changed. The event does not fire when user toggle the slide toggle to change the slide toggle's value.

@Output()

toggleChange: EventEmitter<void>

An event will be dispatched each time the slide-toggle input is toggled. This event always fire when user toggle the slide toggle, but does not mean the slide toggle's value is changed. The event does not fire when user drag 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
NameDescription

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
NameDescription

disableDragValue: boolean

Whether drag action triggers value changes in slide toggle.

disableToggleValue: boolean

Whether toggle action triggers value changes in slide toggle.

Contents