Angular Material Tutorial - 10 - Navbar

let's take a look at navigation

components starting with the toolbar

typically the toolbar displays

information and actions relating to the

current screen it's used for branding

screen titles navigation and actions in

this video though we will only focus on

how the toolbar can be used as a navbar

now the first step is to import the

material toolbar module in material dot

module dot TS in the import statement ad

mat toolbar module also included in the

material components array

now that I think of it the re name is

slightly misleading so I'm going to

replace material components with the

name just material

all right now that we have imported the

module we can use the component in the

HTML so in AB component dot HTML the

component is mat toolbar

within the toolbar I'm going to add a

span tag that says code evolution

if you now save this and take a look at

the browser you should be able to see a

basic toolbar we can add the color to

this toolbar using the color attribute

the color attribute accepts either

primary accent or worn as its value

let's go with primary

if you head back to the browser you

should be able to see a primary colored

toolbar in your application now let's

see how to convert this basic tool bar

into a nav bar

anavar typically consists of the brand

title on the left and a group of links

on the right Mindi convert our span tag

into a div tag

which is going to be our brand code

evolution we're also going to add

another div tag with a set of links I'm

going to add three span tags one for

home

one for about and one for services if

you save the file and take a look at the

browser you can see that it doesn't

exactly look like a navbar but all we

need is to distribute the space in the

toolbar in between the title and the

links so in the CSS which is AB dot

component dot CSS I'm going to add a

class navbar

and specify justify content to be space

between let me also add some spacing

between the span tags padding right one

ram finally add the nav bar class to the

toolbar so in AB dot component dot HTML

on the mat toolbar component class is

equal to now bar now if we take a look

at the browser you should have a proper

nav bar brand on the left and a set of

links on the right now the styling is

completely up to you but a toolbar is

what you need to use to create a nav bar

in angular material in the next video

let's take a look at the side nav

component