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