Slide Toggle • Angular Material

API reference for Angular Material slide-toggle

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

Components

`MatSlideToggle`

Selector: mat-slide-toggle

Exported as: matSlideToggle

Properties

Name	Description
@Input('aria-describedby') `ariaDescribedby: string`	Used to set the aria-describedby attribute on the underlying input element.
@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({ transform: booleanAttribute }) `checked: boolean`	Whether the slide-toggle element is checked or not.
@Input() `color: string \| undefined`	Theme color of the slide toggle. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/slide-toggle/styling. For information on applying color variants in M3, see https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
@Input({ transform: booleanAttribute }) `disableRipple: boolean`	Whether the slide toggle has a ripple.
@Input({ transform: booleanAttribute }) `disabled: boolean`	Whether the slide toggle is disabled.
@Input({ transform: booleanAttribute }) `disabledInteractive: boolean`	Whether the slide toggle should remain interactive when it is disabled.
@Input({ transform: booleanAttribute }) `fullWidth: boolean`	Whether the slide toggle should be full width.
@Input({ transform: booleanAttribute }) `hideIcon: boolean`	Whether to hide the icon inside of the slide toggle.
@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({ transform: booleanAttribute }) `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.
`buttonId: string`	Returns the unique id for the visual hidden button.
`defaults: inject<MatSlideToggleDefaultOptions>(MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS)`
`inputId: string`	Returns the unique id for the visual hidden input.

Methods

focus (): `void`
Focuses the slide-toggle.

registerOnValidatorChange (fn: `() => void`): `void`
Implemented as a part of Validator.
Parameters
fn `() => void`

toggle (): `void`
Toggles the checked state of the slide-toggle.

validate (control: `AbstractControl<boolean, boolean, any>`): `ValidationErrors \| null`
Implemented as a part of Validator.
Parameters
control `AbstractControl<boolean, boolean, any>`
Returns
`ValidationErrors \| null`

Classes

`MatSlideToggleChange`

Change event object emitted by a slide toggle.

Properties

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

Interfaces

`MatSlideToggleDefaultOptions`

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

Properties

Name	Description
`color: ThemePalette`	Default theme color of the slide toggle. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/slide-toggle/styling. For information on applying color variants in M3, see https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
`disableToggleValue: boolean`	Whether toggle action triggers value changes in slide toggle.
`disabledInteractive: boolean`	Whether disabled slide toggles should remain interactive.
`hideIcon: boolean`	Whether to hide the icon inside the slide toggle.

Constants

`MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS`

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

const MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS: InjectionToken;

API reference for Angular Material slide-toggle-testing

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

Classes

`MatSlideToggleHarness` extends ComponentHarness

Harness for interacting with a mat-slide-toggle in tests.

Properties

Name	Description
`static hostSelector: '.mat-mdc-slide-toggle'`

Methods

async blur (): `Promise<void>`
Blurs the slide-toggle.
`Promise<void>`	Promise that resolves when the action completes.

async

blur (): Promise<void>

Blurs the slide-toggle.

Returns

Promise<void>

Promise that resolves when the action completes.

async check (): `Promise<void>`
Puts the slide-toggle in a checked state by toggling it if it is currently unchecked, or doing nothing if it is already checked.
`Promise<void>`	Promise that resolves when the action completes.

async

check (): Promise<void>

Puts the slide-toggle in a checked state by toggling it if it is currently unchecked, or doing nothing if it is already checked.

Returns

Promise<void>

Promise that resolves when the action completes.

async focus (): `Promise<void>`
Focuses the slide-toggle.
`Promise<void>`	Promise that resolves when the action completes.

async

focus (): Promise<void>

Focuses the slide-toggle.

Returns

Promise<void>

Promise that resolves when the action completes.

async getAriaLabel (): `Promise<string \| null>`
Gets the slide-toggle's aria-label.
Returns
`Promise<string \| null>`

async getAriaLabelledby (): `Promise<string \| null>`
Gets the slide-toggle's aria-labelledby.
Returns
`Promise<string \| null>`

async getLabelText (): `Promise<string>`
Gets the slide-toggle's label text.
Returns
`Promise<string>`

async getName (): `Promise<string \| null>`
Gets the slide-toggle's name.
Returns
`Promise<string \| null>`

async host (): `Promise<TestElement>`
Gets a `Promise` for the `TestElement` representing the host element of the component.
Returns
`Promise<TestElement>`

async isChecked (): `Promise<boolean>`
Whether the slide-toggle is checked.
Returns
`Promise<boolean>`

async isDisabled (): `Promise<boolean>`
Whether the slide-toggle is disabled.
Returns
`Promise<boolean>`

async isFocused (): `Promise<boolean>`
Whether the slide-toggle is focused.
Returns
`Promise<boolean>`

async isRequired (): `Promise<boolean>`
Whether the slide-toggle is required.
Returns
`Promise<boolean>`

async isValid (): `Promise<boolean>`
Whether the slide-toggle is valid.
Returns
`Promise<boolean>`

async toggle (): `Promise<void>`
Toggle the checked state of the slide-toggle.
`Promise<void>`	Promise that resolves when the action completes.

async

toggle (): Promise<void>

Toggle the checked state of the slide-toggle.

Returns

Promise<void>

Promise that resolves when the action completes.

async uncheck (): `Promise<void>`
Puts the slide-toggle in an unchecked state by toggling it if it is currently checked, or doing nothing if it is already unchecked.
`Promise<void>`	Promise that resolves when the action completes.

async

uncheck (): Promise<void>

Puts the slide-toggle in an unchecked state by toggling it if it is currently checked, or doing nothing if it is already unchecked.

Returns

Promise<void>

Promise that resolves when the action completes.

static with (options: `SlideToggleHarnessFilters = {}`): `HarnessPredicate<T>`
Gets a `HarnessPredicate` that can be used to search for a slide-toggle w/ specific attributes.
Parameters
options `SlideToggleHarnessFilters = {}`	Options for narrowing the search: `selector` finds a slide-toggle whose host element matches the given selector. `label` finds a slide-toggle with specific label text.
Returns
`HarnessPredicate<T>`	a `HarnessPredicate` configured with the given options.

Interfaces

`SlideToggleHarnessFilters`

A set of criteria that can be used to filter a list of MatSlideToggleHarness instances.

Properties

Name	Description
`checked: boolean`	Only find instances with the given checked value.
`disabled: boolean`	Only find instances where the disabled state matches the given value.
`label: string \| RegExp`	Only find instances whose label matches the given value.
`name: string`	Only find instances whose name is the given value.

Testing

API reference for Angular Material slide-toggle

Components link

MatSlideToggle link

Properties

Methods

Classes link

MatSlideToggleChange link

Properties

Interfaces link

MatSlideToggleDefaultOptions link

Properties

Constants link

MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS link

API reference for Angular Material slide-toggle-testing

Classes link

MatSlideToggleHarness extends ComponentHarness link

Properties

Methods

Interfaces link

SlideToggleHarnessFilters link

Properties

Components

`MatSlideToggle`

Classes

`MatSlideToggleChange`

Interfaces

`MatSlideToggleDefaultOptions`

Constants

`MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS`

Classes

`MatSlideToggleHarness` extends ComponentHarness

Interfaces

`SlideToggleHarnessFilters`