Angular Material Toggle Button Example


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

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

more about Angular Material Button.

I hope you like this amazing article.


Also Read :