Toggle

A Toggle is used to turn something on or off.

API

API reference for Angular Material slide-toggle

import { MatSlideToggleModule } from '@angular/material';

Directives

MatSlideToggle

Represents a slidable "switch" toggle that can be moved between on and off.
selector:mat-slide-toggle

Properties

Name

Description

@Input()

name

Name value will be applied to the input element if present

@Input()

id

A unique id for the slide-toggle input. If none is supplied, it will be auto-generated.

@Input()

labelPosition

Whether the label should appear after or before the slide-toggle. Defaults to 'after'

@Input('aria-label')

ariaLabel

Used to set the aria-label attribute on the underlying input element.

@Input('aria-labelledby')

ariaLabelledby

Used to set the aria-labelledby attribute on the underlying input element.

@Input()

required

Whether the slide-toggle is required.

@Input()

disableRipple

Whether the ripple effect for this slide-toggle is disabled.

@Output()

change

An event will be dispatched each time the slide-toggle changes its value.

inputId

Returns the unique id for the visual hidden input.

@Input()

checked

Whether the slide-toggle is checked.

@Input()

color

The color of the slide-toggle. Can be primary, accent, or warn.

Methods

focus

Focuses the slide-toggle.

toggle

Toggles the checked state of the slide-toggle.

Additional classes

MatSlideToggleChange

Properties

Name

Description

source

 

checked

 

MatSlideToggleBase

 


Example

Storybook failed to load. Please connect to the VPN to access.