Angular Material Tutorial - 5 - Button

in this video let's take a look at

angular material buttons angular

material buttons are basically native

button tags or anchor tags enhanced with

material design we had a quick look at

material buttons in the getting started

video now let's take a more detailed

look to make use of material buttons we

need to import the material button

module so in material dot module dot TS

import the mat button module and added

to the material components array now

let's go back to app component dot HTML

to create the simplest of material

buttons we add the mat button attribute

so a button tag with the math button

attribute save this and take a look at

the browser and you can see a material

button now let's take a look at some of

the variants

the first variant is a raised button the

attribute is mat raised button

the next variant is a flat button the

attribute is mat flat button

and we also have a variant that applies

just the outline the attribute is Matt

strobe button

let's save this and take a look at the

browser the buttons are too close to

each other so let's add some margin in

AB component dot CSS

margin-right three ram now if you go

back to the browser you can see the

different buttons raised flat and strode

apart from these we also have circular

buttons in angular material there are

again three variants the first one is an

icon button the attribute is mat icon

button

the second variant is a fab button the

attribute is mat fab

lastly a mini fire button with the

attribute mat mini fab

save the file and let's take a look at

them in the browser so we have icon

button which is a circular button with a

transparent background fab button which

is a circular button which defaults to

accent color of your theme and the mini

fab button which is just a smaller

version of the fab button so these are

the variants for circular buttons next

let's talk about button colors when it

comes to material there are three colors

we talked about primary accent and

warned colors W AR n warned to apply the

color we make use of the color attribute

on the button element let me copy paste

three buttons and add the colors

color is equal to primary

the text is primary color is equal to

accent

the text is accent and finally color is

equal to war and the text is war if you

take a look at the browser you can see

the button text in different colors

primary accent and war how the colors

apply are based on the variant of the

button if we were to apply the same

colors to raised buttons for example

you can see the difference

primary accent and worn so based on the

type of the button the color is added to

the element the last thing I want to

show is how to disable the ripple effect

right now you can see that when I click

on the button there is a ripple

animation effect if you don't like it

for some reason you can add the disable

ripple attribute to the button element

so on this third button which is for

warm I am going to add

disable Ripple if I save this and go

back to the browser only on this button

when I click you can see that there is

no more ripple effect ripple effect no

ripple effect now those were a lot of

attributes to keep in mind so let me

point you to the documentation go to

material dot io and click on components

and then scroll to the button component

click on examples and click on the code

icon here you pretty much have all the

code required for you to experiment with

material buttons and if you visit the

API tab you can see what is the module

that needs to be imported so angular

material provides six variants and three

colors that can be applied to the native

button element buttons kind of make up a

part of few other material elements so

make sure you have a good knowledge of

them with this understanding let's take

a look at button toggle in the next

video