Angular Material Tutorial - 2 - Getting Started

in this video let's see how we can add

angular material to an angular

application now before I show you how to

do that I want to tell you that for this

course we will be closely looking at the

documentation and that is for two

reasons first one is to stay updated

with the changes there will be future

releases of angular material and it is

safe to rely on the documentation as it

is constantly updated the second reason

is to know the directives that have to

be used for the different components

when we start writing code we need to

import certain components and it is next

to impossible to know the component

names without referring to the

documentation so make sure you have a

tab open for the dogs while you are

following the videos alright with that

let's see how to add angular material to

an angular application from the navbar I

am going to navigate to the guides

section of the documentation here you

can see the getting started heading as

well as the schematics heading both

these sections contain information on

how to install angular material

depending on the version of your angular

application the getting started section

contains about six different steps which

you have to go through to set up

material in your angular application and

this is only if your project is below

version six for this series we will be

working with angular version seven so I

will demo how to add material with CLI

schematics which is valid for angular

version 6 and above now in the terminal

when I run the command ng - - version

you can see that I have angular CLI

version seven if you are at a lower

version please make sure to update it

before creating a new project alright

now what I have done is created a brand

new project using the command

engi new material - demo material - demo

is the name of the project we will be

working with and of course I have opened

the project folder in vias code next to

setup angular material

make sure you navigate into the project

folder and run the command ng add at

angular slash material when we run the

command it is going to ask us an option

for the team I'm going to stick with

indigo pink next it checks with us for

hammer J's for gesture recognition I

will simply go with yes for now next

browser animations again yes

and that is pretty much all you have to

do you are ready to start using angular

material in your application now this

was possible because angular material is

packaged with CLI schematics what that

means is that the angular team provided

us with a single command that will

handle setting up material in your

application let's take a look at the

differences to see what changes were

made by running the command first up

angular dot JSON the only difference is

the inclusion of a CSS file in the

Styles array and this is the indigo pink

theme which we opted for the next file

is package dot JSON here you can see

that angular cdk and angular material

have been added to the list of

dependencies next we also have updates

to the package lock dot JSON file and

then we have index dot HTML here two

references have been added one to

material icons and the other to Roboto

font

in mindo TS there is the inclusion of

ham urges in style.css there is some CSS

reset that has been added to the body

tag

finally in AB dot module OTS we are

importing the browser animations module

and adding it to the imports array now

if you're doing this manually make sure

to add it after the browser's module so

the command basically adds project

dependencies includes them in the module

and sets up the style and theme for your

angular application to test if it is

actually working let's use materials

button component there are three simple

steps first step imported in app dot

module dot TS import math button module

from angular slash material second step

added to the imports array

third step use it in the HTML so in AB

component dot HTML wipe out the existing

HTML and add a button tag with the text

hello world but also with the directive

mat - button now let's run the

application in the terminal run the

command ng serve - OH

in the browser you can see that we have

a button that says hello world which is

styled with an inner material let me

change the directive to matte raised

button go back to the browser and you

can see the subtle difference the button

is now raised so the material library is

working perfectly fine you're probably

thinking how would I know to use matte

button or matte raised button right well

it's pretty simple I refer to the

documentation I can mention it is kind

of a necessity for this particular

course there is just no way that we can

know what directive has to be used for

which component this was a simple

getting started video and that is the

reason I used a simple button component

without referring to the documentation

in the upcoming videos we will be

referring the documentation more often

all right there you go

angular material working in your angular

application what we had to do was run

the command in G and at angular slash

material in the CLI project in the next

video let's set up the material module

thank you guys for watching no fear

subscribe I'll see you guys in the next

video