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:not([multiple])

Exported as: matButtonToggleGroup

Name	Description
@Input() `disabled: boolean`	Whether the component is disabled.
@Input() `name: string`	`name` attribute for the underlying `input` element.
@Input() `selected: MatButtonToggle \| null`	The currently selected button toggle, should match the value.
@Input() `value: any`	Value of the toggle group.
@Input() `vertical: boolean`	Whether the toggle group is vertical.
@Output() `change: EventEmitter<MatButtonToggleChange>`	Event emitted when the group's value changes.

Multiple selection button-toggle group. ngModel is not supported in this mode.

Selector: mat-button-toggle-group[multiple]

Exported as: matButtonToggleGroup

Name	Description
@Input() `disabled: boolean`	Whether the component is disabled.
@Input() `vertical: boolean`	Whether the toggle group is vertical.

Single button inside of a toggle group.

Selector: mat-button-toggle

Exported as: matButtonToggle

Name	Description
@Input('aria-label') `ariaLabel: string`	Attached to the aria-label attribute of the host element. In most cases, arial-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() `checked: boolean`	Whether the button is checked.
@Input() `disabled: boolean`	Whether the button 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.
`buttonToggleGroup: MatButtonToggleGroup`	The parent button toggle group (exclusive selection). Optional.
`buttonToggleGroupMultiple: MatButtonToggleGroupMultiple`	The parent button toggle group (multiple selection). Optional.
`inputId: string`	Unique ID for the underlying `input` element.

focus
Focuses the button.

Change event object emitted by MatButtonToggle.

Name	Description
`source: MatButtonToggle \| null`	The MatButtonToggle that emits the event.
`value: any`	The value assigned to the MatButtonToggle.

Contents