Angular Material Tutorial - 6 - Button Toggle

alright guys let's take a look at the

button toggle element in this video

button toggle is basically an element

with the appearance of a button and can

toggle between on and off States to get

started we need to import Matt button

toggle module from angular material and

add it to the material array

import it and add it to the material

components array now in the HTML we can

add Matt button toggle with the text

toggle if you save the file and take a

look at the browser you should see a

toggle button click on the button a

toggle say the on state click again and

it toggles to the off state now you

might want to use the state of the

toggle button to perform some operation

to get hold of the toggle state add a

template reference variable and then

access the checked property on that

variable

toggle button is going to be the

template reference variable and then

interpolate toggle button dot checked if

you now take a look at the browser you

can see that the value is false click on

the button and the value is true now the

button checked value is false by default

we can change that though by adding the

checked attribute to the toggle button

element

if you now take a look at the browser

you can see that the button appearance

is that of the on state and the checked

property value is now true we of course

still have the ripple effect when we

click on the button to disable it add

the disable ripple attribute

you can see that the ripple animation is

now gone it is also possible to disable

the button itself by adding the disabled

attribute

if I now head back to the browser and

try clicking on the button nothing

happens the button is disabled and

cannot be toggled between on and off

alright these are some of the properties

on a 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 you how to

display them using the button toggle

element to create a group of button

toggle elements we use the Matt button

toggle group directive

within the group we can add the

individual button toggle elements

angular

react and view 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

view now to access this group's value we

need to create a template reference

variable in assign Matt button toggle

group

the variable name is toggle group and to

this we assign Matt button toggle group

now we can interpolate toggle group dot

value

to access the value of this toggle

button group let's save this and head to

the browser and you can see that we have

the button group I click on the button

and the group value is displayed angular

react and view my default the toggle

group behaves like radio buttons and

only one 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 over here I'm going to add

multiple if you now go back to the

browser you can see that we can select

multiple elements and the value is now a

comma-separated list of the selections

angular react view just angular and

react just angular or all three

now what we have seen is how to get hold

of the value in the 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 I do have a small series on

angular component interaction where I go

in detail about using reference

variables within the component class so

please do take a look at that if you

have a necessity but this is pretty much

how you work with the button toggle

element in angular material thank you

guys for watching feel free to subscribe

I'll see you guys in the next video