Table of Contents
mat-button-toggle
The Angular directive <mat-button-toggle> is used to create a toggle or on/off button with material styling and animations. Mat-button-toggle buttons are configured to behave as radio buttons or checkboxes. They are part of <mat-button-toggle-group>.
Syntax :
<mat-button-toggle>Toggle Button</mat-button-toggle>
Angular Material mat-button-toggle-group Example
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold">Bold</mat-button-toggle>
<mat-button-toggle value="italic">Italic</mat-button-toggle>
<mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>
Single selection
It allows only one item to be selected within the toggle group. To create a single selection toggle button,<mat-button-toggle> derivative is nested under <mat-button-toggle-group>. <mat-button-toggle-group> behaves like a radio-button group, by default, allowing only one item to be selected. When a single selection is made by the user, the value of the selected item is displayed on the UI screen.
app.component.html
<div>
<h3>Angular Material Button Toggle</h3>
<h4>Single selection</h4>
<mat-button-toggle-group #togglegroup1="matButtonToggleGroup">
<mat-button-toggle value="Angular Material ">
Angular Material
</mat-button-toggle>
<mat-button-toggle value="React Material ">
React Material
</mat-button-toggle>
</mat-button-toggle-group>
<br>
<h3> You have selected : {{ toggleGroup1.value }} </h3>
</div>
Output :
And you will get output something like this.

Multiple selection
It allows more than one item to be selected within the toggle group. To create a multiple selection toggle button,<mat-button-toggle> derivative is nested under <mat-button-toggle-group> and an attribute named as multiple, is used.
Numerous items can be selected when multiple attributes are added (checkbox behavior). For multiple selections, the attribute multiple is added to the <mat-button-toggle-group> directive. When multiple selections are made by the user, the multiple values are selected and displayed, as comma-separated-values when values are viewed on the UI screen.
app.component.html
<div>
<h3>Angular Material Button Toggle</h3>
<div>
<h4>Multiple selection</h4>
<mat-button-toggle-group #togglegroup2="matButtonToggleGroup" multiple="">
<mat-button-toggle value="Angular">
Angular
</mat-button-toggle>
<mat-button-toggle value="React">
React
</mat-button-toggle>
<mat-button-toggle value="Vue">
Vue
</mat-button-toggle>
</mat-button-toggle-group>
<br>
You have selected : {{ toggleGroup2.value }}
</div>
</div>
Output :
And you will get output something like this.

more about Angular Material Button.
I hope you like this amazing article.
Also Read :
- Angular Material Grid Layout Example
- Angular Material Card Example
- Angular Material List Example
- Angular Material Date Range Picker
- Angular Material AutoComplete Dropdown Example
- Angular Material Select Change Event Example
- typescript string to number
- How to convert string to number in javascript or typescript