API for button-toggle

API reference for Angular Material button-toggle

import {MatButtonToggleModule} from '@angular/material/button-toggle';

Exclusive selection button toggle group that behaves like a radio-button group.

Selector: mat-button-toggle-group

Exported as: matButtonToggleGroup
Properties
Name Description
@Input()

appearance: MatButtonToggleAppearance

The appearance for all the buttons in the group.

@Input({ transform: booleanAttribute })

disabled: boolean

Whether multiple button toggle group is disabled.

@Input({ transform: booleanAttribute })

disabledInteractive: boolean

Whether buttons in the group should be interactive while they're disabled.

@Input({ transform: booleanAttribute })

hideMultipleSelectionIndicator: boolean

Whether checkmark indicator for multiple-selection button toggle groups is hidden.

@Input({ transform: booleanAttribute })

hideSingleSelectionIndicator: boolean

Whether checkmark indicator for single-selection button toggle groups is hidden.

@Input({ transform: booleanAttribute })

multiple: boolean

Whether multiple button toggles can be selected.

@Input()

name: string

name attribute for the underlying input element.

@Input()

value: any

Value of the toggle group.

@Input({ transform: booleanAttribute })

vertical: boolean

Whether the toggle group is vertical.

@Output()

change: EventEmitter<MatButtonToggleChange>

Event emitted when the group's value changes.

dir: Direction

The layout direction of the toggle button group.

selected: MatButtonToggle | MatButtonToggle[]

Selected button toggles in the group.

Single button inside of a toggle group.

Selector: mat-button-toggle

Exported as: matButtonToggle
Properties
Name Description
@Input()

appearance: MatButtonToggleAppearance

The appearance style of the button.

@Input('aria-label')

ariaLabel: string

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

ariaLabelledby: string | null

Users can specify the aria-labelledby attribute which will be forwarded to the input element

@Input({ transform: booleanAttribute })

checked: boolean

Whether the button is checked.

@Input({ transform: booleanAttribute })

disableRipple: boolean

Whether ripples are disabled on the button toggle.

@Input({ transform: booleanAttribute })

disabled: boolean

Whether the button is disabled.

@Input({ transform: booleanAttribute })

disabledInteractive: boolean

Whether the button should remain interactive when it is disabled.

@Input()

id: string

The unique ID for this button toggle.

@Input()

name: string

HTML's 'name' attribute used to group radios for unique selection.

@Input()

value: any

MatButtonToggleGroup reads this to assign its own value.

@Output()

change: EventEmitter<MatButtonToggleChange>

Event emitted when the group value changes.

buttonId: string

Unique ID for the underlying button element.

buttonToggleGroup: MatButtonToggleGroup

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

Change event object emitted by button toggle.

Properties
Name Description

source: MatButtonToggle

The button toggle that emits the event.

value: any

The value assigned to the button toggle.

Represents the default options for the button toggle that can be configured using the MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS injection token.

Properties
Name Description

appearance: MatButtonToggleAppearance

Default appearance to be used by button toggles. Can be overridden by explicitly setting an appearance on a button toggle or group.

disabledInteractive: boolean

Whether disabled toggle buttons should be interactive.

hideMultipleSelectionIndicator: boolean

Whether icon indicators should be hidden for multiple-selection button toggle groups.

hideSingleSelectionIndicator: boolean

Whether icon indicators should be hidden for single-selection button toggle groups.

MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY
Returns
MatButtonToggleDefaultOptions

Deprecated
type ToggleType = 'checkbox' | 'radio';

Possible appearance styles for the button toggle.

type MatButtonToggleAppearance = 'legacy' | 'standard';

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

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';

Harness for interacting with a standard mat-button-toggle in tests.

Properties
Name Description

static hostSelector: '.mat-button-toggle'

The selector for the host element of a MatButton instance.

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 Promise for the TestElement representing the host element of the component.

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 HarnessPredicate that can be used to search for a MatButtonToggleHarness that meets certain criteria.

Parameters

options

ButtonToggleHarnessFilters = {}

Options for filtering which button toggle instances are considered a match.

Returns
HarnessPredicate<MatButtonToggleHarness>

a HarnessPredicate configured with the given options.

Harness for interacting with a standard mat-button-toggle in tests.

Properties
Name Description

static hostSelector: '.mat-button-toggle-group'

The selector for the host element of a MatButton instance.

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 Promise for the TestElement representing the host element of the component.

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 HarnessPredicate that can be used to search for a MatButtonToggleGroupHarness that meets certain criteria.

Parameters

options

ButtonToggleGroupHarnessFilters = {}

Options for filtering which button toggle instances are considered a match.

Returns
HarnessPredicate<MatButtonToggleGroupHarness>

a HarnessPredicate configured with the given options.

Criteria that can be used to filter a list of MatButtonToggleHarness instances.

Properties
Name Description

checked: boolean

Only find instances that are checked.

disabled: boolean

Only find instances which match the given disabled state.

name: string | RegExp

Only find instances whose name matches the given value.

text: string | RegExp

Only find instances whose text matches the given value.

Criteria that can be used to filter a list of MatButtonToggleGroupHarness instances.

Properties
Name Description

disabled: boolean

Only find instances which match the given disabled state.

Azure & Blue theme selected.