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()

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.

defaults: MatSlideToggleDefaultOptions

inputId: string

Returns the unique id for the visual hidden input.

@Output()
Deprecated

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.

Methods
focus

Focuses the slide-toggle.

Parameters

options?

FocusOptions

toggle

Toggles the checked state of the slide-toggle.

Validator for Material slide-toggle components with the required attribute in a template-driven form. The default validator for required form controls asserts that the control value is not undefined but that is not appropriate for a slide-toggle where the value is always defined.

Required slide-toggle form controls are valid when checked.

Selector: mat-slide-toggle[required][formControlName] mat-slide-toggle[required][formControl] mat-slide-toggle[required][ngModel]

Properties
Name Description

required: boolean | string

Methods
registerOnValidatorChange
Parameters

fn

() => void

validate
Parameters

control

AbstractControl

Returns
ValidationErrors | null

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

disableToggleValue: boolean

Whether toggle action triggers value changes in slide toggle.

Deprecated

disableDragValue: boolean

Whether drag 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>;
const MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR: Provider;