Angular Material Toggle Button

Angular Material Toggle Button Example

by

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.

Angular Material Button Toggle
Example Source Code

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.

Angular Material Toggle Button
Example Source Code

more about Angular Material Button.

I hope you like this amazing article.

Also Read :

Top 10 VS Code extensions