API reference for Angular Material button-toggle
import {MatButtonToggleModule} from '@angular/material/button-toggle';
Directives
MatButtonToggleGroup
Exclusive selection button toggle group that behaves like a radio-button group.
Selector: mat-button-toggle-group
Exported as: matButtonToggleGroupProperties
Name | Description |
---|---|
@Input()
|
The appearance for all the buttons in the group. |
@Input({ transform: booleanAttribute })
|
Whether multiple button toggle group is disabled. |
@Input({ transform: booleanAttribute })
|
Whether buttons in the group should be interactive while they're disabled. |
@Input({ transform: booleanAttribute })
|
Whether checkmark indicator for multiple-selection button toggle groups is hidden. |
@Input({ transform: booleanAttribute })
|
Whether checkmark indicator for single-selection button toggle groups is hidden. |
@Input({ transform: booleanAttribute })
|
Whether multiple button toggles can be selected. |
@Input()
|
|
@Input()
|
Value of the toggle group. |
@Input({ transform: booleanAttribute })
|
Whether the toggle group is vertical. |
@Output()
|
Event emitted when the group's value changes. |
|
The layout direction of the toggle button group. |
|
Selected button toggles in the group. |
MatButtonToggle
Single button inside of a toggle group.
Selector: mat-button-toggle
Exported as: matButtonToggleProperties
Name | Description |
---|---|
@Input()
|
The appearance style of the button. |
@Input('aria-label')
|
Attached to the aria-label attribute of the host element. In most cases, aria-labelledby will take precedence so this may be omitted. |
@Input('aria-labelledby')
|
Users can specify the |
@Input({ transform: booleanAttribute })
|
Whether the button is checked. |
@Input({ transform: booleanAttribute })
|
Whether ripples are disabled on the button toggle. |
@Input({ transform: booleanAttribute })
|
Whether the button is disabled. |
@Input({ transform: booleanAttribute })
|
Whether the button should remain interactive when it is disabled. |
@Input()
|
The unique ID for this button toggle. |
@Input()
|
HTML's 'name' attribute used to group radios for unique selection. |
@Input()
|
MatButtonToggleGroup reads this to assign its own value. |
@Output()
|
Event emitted when the group value changes. |
|
Unique ID for the underlying |
|
The parent button toggle group (exclusive selection). Optional. |
Methods
focus | |
---|---|
Focuses the button. |
|
Parameters | |
options? FocusOptions
|
|
isSingleSelector | |
---|---|
Whether the toggle is in single selection mode. |
|
Returns | |
boolean
|
|
Classes
MatButtonToggleChange
Change event object emitted by button toggle.
Properties
Name | Description |
---|---|
|
The button toggle that emits the event. |
|
The value assigned to the button toggle. |
Interfaces
MatButtonToggleDefaultOptions
Represents the default options for the button toggle that can be configured
using the MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS
injection token.
Properties
Name | Description |
---|---|
|
Default appearance to be used by button toggles. Can be overridden by explicitly setting an appearance on a button toggle or group. |
|
Whether disabled toggle buttons should be interactive. |
|
Whether icon indicators should be hidden for multiple-selection button toggle groups. |
|
Whether icon indicators should be hidden for single-selection button toggle groups. |
Functions
MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY | |
---|---|
Returns | |
MatButtonToggleDefaultOptions
|
|
Type aliases
ToggleType
type ToggleType = 'checkbox' | 'radio';
MatButtonToggleAppearance
Possible appearance styles for the button toggle.
type MatButtonToggleAppearance = 'legacy' | 'standard';
Constants
MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS
Injection token that can be used to configure the default options for all button toggles within an app.
const MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS: InjectionToken<MatButtonToggleDefaultOptions>;
MAT_BUTTON_TOGGLE_GROUP
Injection token that can be used to reference instances of MatButtonToggleGroup
.
It serves as alternative token to the actual MatButtonToggleGroup
class which
could cause unnecessary retention of the class and its component metadata.
const MAT_BUTTON_TOGGLE_GROUP: InjectionToken<MatButtonToggleGroup>;
API reference for Angular Material button-toggle-testing
import {MatButtonToggleHarness} from '@angular/material/button-toggle/testing';
Classes
MatButtonToggleHarness
extends
ComponentHarness
Harness for interacting with a standard mat-button-toggle in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
blur
|
|
---|---|
Blurs the toggle. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
check
|
|
---|---|
Puts the button toggle in a checked state by toggling it if it's currently unchecked, or doing nothing if it is already checked. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
focus
|
|
---|---|
Focuses the toggle. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
getAppearance
|
|
---|---|
Gets the appearance that the button toggle is using. |
|
Returns | |
Promise<MatButtonToggleAppearance>
|
|
async
getAriaLabel
|
|
---|---|
Gets a promise for the button toggle's aria-label. |
|
Returns | |
Promise<string | null>
|
|
async
getAriaLabelledby
|
|
---|---|
Gets a promise for the button toggles's aria-labelledby. |
|
Returns | |
Promise<string | null>
|
|
async
getName
|
|
---|---|
Gets a promise for the button toggle's name. |
|
Returns | |
Promise<string | null>
|
|
async
getText
|
|
---|---|
Gets a promise for the button toggle's text. |
|
Returns | |
Promise<string>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isChecked
|
|
---|---|
Gets a boolean promise indicating if the button toggle is checked. |
|
Returns | |
Promise<boolean>
|
|
async
isDisabled
|
|
---|---|
Gets a boolean promise indicating if the button toggle is disabled. |
|
Returns | |
Promise<boolean>
|
|
async
isFocused
|
|
---|---|
Whether the toggle is focused. |
|
Returns | |
Promise<boolean>
|
|
async
toggle
|
|
---|---|
Toggle the checked state of the buttons toggle. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
uncheck
|
|
---|---|
Puts the button toggle in an unchecked state by toggling it if it's currently checked, or doing nothing if it's already unchecked. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options ButtonToggleHarnessFilters = {}
|
Options for filtering which button toggle instances are considered a match. |
Returns | |
HarnessPredicate<MatButtonToggleHarness>
|
a |
MatButtonToggleGroupHarness
extends
ComponentHarness
Harness for interacting with a standard mat-button-toggle in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
Methods
async
getAppearance
|
|
---|---|
Gets the appearance that the group is using. |
|
Returns | |
Promise<MatButtonToggleAppearance>
|
|
async
getToggles
|
|
---|---|
Gets the button toggles that are inside the group. |
|
Parameters | |
filter ButtonToggleHarnessFilters = {}
|
Optionally filters which toggles are included. |
Returns | |
Promise<MatButtonToggleHarness[]>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isDisabled
|
|
---|---|
Gets whether the button toggle group is disabled. |
|
Returns | |
Promise<boolean>
|
|
async
isVertical
|
|
---|---|
Gets whether the button toggle group is laid out vertically. |
|
Returns | |
Promise<boolean>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options ButtonToggleGroupHarnessFilters = {}
|
Options for filtering which button toggle instances are considered a match. |
Returns | |
HarnessPredicate<MatButtonToggleGroupHarness>
|
a |
Interfaces
ButtonToggleHarnessFilters
Criteria that can be used to filter a list of MatButtonToggleHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances that are checked. |
|
Only find instances which match the given disabled state. |
|
Only find instances whose name matches the given value. |
|
Only find instances whose text matches the given value. |
ButtonToggleGroupHarnessFilters
Criteria that can be used to filter a list of MatButtonToggleGroupHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances which match the given disabled state. |