API reference for Angular Material slide-toggle
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
Directives
MatSlideToggle
Selector: mat-slide-toggle
Exported as: matSlideToggleProperties
Name | Description |
---|---|
@Input('aria-describedby')
|
Used to set the aria-describedby attribute on the underlying input element. |
@Input('aria-label')
|
Used to set the aria-label attribute on the underlying input element. |
@Input('aria-labelledby')
|
Used to set the aria-labelledby attribute on the underlying input element. |
@Input({ transform: booleanAttribute })
|
Whether the slide-toggle element is checked or not. |
@Input()
|
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 })
|
Whether the slide toggle has a ripple. |
@Input({ transform: booleanAttribute })
|
Whether the slide toggle is disabled. |
@Input({ transform: booleanAttribute })
|
Whether the slide toggle should remain interactive when it is disabled. |
@Input({ transform: booleanAttribute })
|
Whether to hide the icon inside of the slide toggle. |
@Input()
|
A unique id for the slide-toggle input. If none is supplied, it will be auto-generated. |
@Input()
|
Whether the label should appear after or before the slide-toggle. Defaults to 'after'. |
@Input()
|
Name value will be applied to the input element if present. |
@Input({ transform: booleanAttribute })
|
Whether the slide-toggle is required. |
@Output()
|
An event will be dispatched each time the slide-toggle changes its value. |
@Output()
|
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. |
|
Returns the unique id for the visual hidden button. |
|
|
|
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
|
|
MatSlideToggleRequiredValidator
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 |
---|---|
|
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
|
|
Classes
MatSlideToggleChange
Change event object emitted by a slide toggle.
Properties
Name | Description |
---|---|
|
The new |
|
The source slide toggle of the event. |
Interfaces
MatSlideToggleDefaultOptions
Default mat-slide-toggle
options that can be overridden.
Properties
Name | Description |
---|---|
|
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 |
|
Whether toggle action triggers value changes in slide toggle. |
|
Whether disabled slide toggles should remain interactive. |
|
Whether to hide the icon inside the slide toggle. |
Constants
MAT_SLIDE_TOGGLE_VALUE_ACCESSOR
const MAT_SLIDE_TOGGLE_VALUE_ACCESSOR: { provide: InjectionToken<readonly ControlValueAccessor[]>; useExisting: Type<any>; multi: boolean; };
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<MatSlideToggleDefaultOptions>;
MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR
const MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR: Provider;
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 |
---|---|
|
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 |
|
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 |
|
Parameters | |
options SlideToggleHarnessFilters = {}
|
Options for narrowing the search:
|
Returns | |
HarnessPredicate<T>
|
a |
Interfaces
SlideToggleHarnessFilters
A set of criteria that can be used to filter a list of MatSlideToggleHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances with the given checked value. |
|
Only find instances where the disabled state matches the given value. |
|
Only find instances whose label matches the given value. |
|
Only find instances whose name is the given value. |