Slide toggle

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

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<T>

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.

defaultColor: ThemePalette | undefined

Default color to fall back to if no value is set.

defaultTabIndex: number

Tabindex to which to fall back to if no value is set.

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.

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

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 color for slide toggles.

disableToggleValue: boolean

Whether toggle 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;

API reference for Angular Material slide-toggle-testing

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

Harness for interacting with a MDC-based 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
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
Returns
Promise<boolean>

async
isValid

Whether the slide-toggle is valid.

Returns
Promise<boolean>

async
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.

Indigo & Pink theme selected.