Angular Material Button Toggle

In this lecture we'll take a look at button toggle element, button toggle is basically an element with the appearance of a normal button and can toggle between on and off states. As always to get started we need to import MatButtonToggleModule from @angular/material and added to MaterialComponents array.

import { MatButtonModule, MatButtonToggleModule } from "@angular/material";

const MaterialComponents = [MatButtonModule, MatButtonToggleModule];

Now in the HTML we can add <mat-button-toggle>Toggle</mat-button-toggle> and if you save the file and take a look at your browser, you should see a toggle button.

<mat-button-toggle>Toggle</mat-button-toggle>

If you click on that button you'll see the on state click again and you will see the off state so what it does is it toggles between two states. Now you might want to use the state of the toggle button to perform some operation to get hold of the toggle state just add a template reference variable and then access the checked property on that variable.

<div>
  <mat-button-toggle #toggleBtn>Toggle</mat-button-toggle>
  {{ toggleBtn.checked }}
</div>

angular material button toggle

If you take a look at your browser again you'll see the value is changed with the state of button toggle when it's checked the value becomes true and if not it becomes false, also the button is unchecked by default we can change that by adding the checked attribute to the toggle button element.

<div>
  <mat-button-toggle #toggleBtn checked>Toggle</mat-button-toggle>
  <b>{{ toggleBtn.checked }}</b>
</div>

If you now take a look at browser you can see that the button appearance is checked and the value is true by default now.

You might notice that we still have the ripple effect when we click on the button, to disable it add the disableRipple attribute to the button toggle element. It is also possible to disable the button itself by adding the disabled attribute.

Alright these are some of the properties on the button toggle element now although these elements can be used individually they are typically grouped together and presented as better alternatives to radio buttons or checkboxes, for example let's say you have a list of front-end technologies let me show how to display them using the button toggle element.

To create a group of button toggle elements we use the <mat-button-toggle-group> directive within the group we can add the individual button toggle elements.

<div>
  <mat-button-toggle-group>
    <mat-button-toggle>Angular</mat-button-toggle>
    <mat-button-toggle>React</mat-button-toggle>
    <mat-button-toggle>VueJs</mat-button-toggle>
  </mat-button-toggle-group>
</div>

We have three elements here Angular, React and VueJs each of the elements need to have a value attribute which will point to the overall value of this group, so value is equal to angular, react and vuejs.

<div>
  <mat-button-toggle-group>
    <mat-button-toggle value="angular">Angular</mat-button-toggle>
    <mat-button-toggle value="react">React</mat-button-toggle>
    <mat-button-toggle value="vuejs">VueJs</mat-button-toggle>
  </mat-button-toggle-group>
</div>

Now to access this group's value we need to create a template reference variable in assign mat-button-toggle-group, the variable name is #toggleGroup and to this we assign matButtonToggleGroup.

Now we can interpolate toggleGroup.value, let's see the final code bellow.

<div>
  <mat-button-toggle-group #toggleGroup="matButtonToggleGroup">
    <mat-button-toggle value="angular">Angular</mat-button-toggle>
    <mat-button-toggle value="react">React</mat-button-toggle>
    <mat-button-toggle value="vuejs">VueJs</mat-button-toggle>
  </mat-button-toggle-group>
  <b>{{ toggleGroup.value }}</b>
</div>

Save the file and take a look again to the browser you can see that when you click on the button and the group value is displayed. By default the toggle group behaves like radio buttons and only on item can be selected at a time if you want the behavior to be that of a checkbox where multiple items can be selected you simply need to add the multiple attribute to the toggle group element so you only need to add multiple as an attribute to toggle group.

<div>
  <mat-button-toggle-group #toggleGroup="matButtonToggleGroup" multiple>
    <mat-button-toggle value="angular">Angular</mat-button-toggle>
    <mat-button-toggle value="react">React</mat-button-toggle>
    <mat-button-toggle value="vuejs">VueJs</mat-button-toggle>
  </mat-button-toggle-group>
  <b>{{ toggleGroup.value }}</b>
</div>

If you save again and have a look you can see that you can check and select multiple values separated by comma. Now what we have seen is how to get hold of the value in HTML you can also listen to change events and execute some code written in the component class as well, you can also get hold of the template reference variable in the class component and perform any required operation.

This pretty much how you work with the button toggle element in angular material.