API for slide-toggle

API reference for Angular Material slide-toggle

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

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.io/components/slide-toggle/styling.

For information on applying color variants in M3, see https://material.angular.io/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 })

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

Focuses the slide-toggle.

registerOnValidatorChange

Implemented as a part of Validator.

Parameters

fn

() => void

toggle

Toggles the checked state of the slide-toggle.

validate

Implemented as a part of Validator.

Parameters

control

AbstractControl<boolean, boolean>

Returns
ValidationErrors | null

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]

Deprecated
Properties
Name Description

required: boolean | string

Tracks changes to the required attribute bound to this directive.

Methods
enabled
Parameters

input

boolean

Returns
boolean

registerOnValidatorChange
Parameters

fn

() => void

validate
Parameters

control

AbstractControl<any, any>

Returns
ValidationErrors | null

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.

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.io/components/slide-toggle/styling.

For information on applying color variants in M3, see https://material.angular.io/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.

Deprecated
const MAT_SLIDE_TOGGLE_VALUE_ACCESSOR: { provide: InjectionToken<readonly ControlValueAccessor[]>; useExisting: Type<any>; multi: boolean; };

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

const MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS: InjectionToken<MatSlideToggleDefaultOptions>;
Deprecated
const MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR: Provider;

API reference for Angular Material slide-toggle-testing

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

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

Properties
Name Description

static hostSelector: '.mat-mdc-slide-toggle'

Methods
async
blur

Blurs the slide-toggle.

Returns
Promise<void>

Promise that resolves when the action completes.

async
check

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

Focuses the slide-toggle.

Returns
Promise<void>

Promise that resolves when the action completes.

async
getAriaLabel

Gets the slide-toggle's aria-label.

Returns
Promise<string | null>

async
getAriaLabelledby

Gets the slide-toggle's aria-labelledby.

Returns
Promise<string | null>

async
getLabelText

Gets the slide-toggle's label text.

Returns
Promise<string>

async
getName

Gets the slide-toggle's name.

Returns
Promise<string | null>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

async
isChecked

Whether the slide-toggle is checked.

Returns
Promise<boolean>

async
isDisabled

Whether the slide-toggle is disabled.

Returns
Promise<boolean>

async
isFocused

Whether the slide-toggle is focused.

Returns
Promise<boolean>

async
isRequired

Whether the slide-toggle is required.

Returns
Promise<boolean>

async
isValid

Whether the slide-toggle is valid.

Returns
Promise<boolean>

async
toggle

Toggle the checked state of the slide-toggle.

Returns
Promise<void>

Promise that resolves when the action completes.

async
uncheck

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

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.

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.

Azure & Blue theme selected.