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 information on applying color variants in M3, see https://material.angular.io/guide/theming#using-component-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: MatSlideToggleDefaultOptions

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