Angular Material Tutorial - 11 - Sidenav

in this video let's take a look at side

nav and angular material the first step

as always is to import the module so in

material module dot es import mat side

nav module and add it to the material

array now we can add the site map to our

application

to set up a site now we use three

components the first one is Matt site

nap container which acts as a container

to the site nav as well as the main

content within the container we have mat

side nav

which represents the site content

and then we have map site map content

which represents the main content it is

important that the site content and the

main content are placed within the

container if you don't want some

elements to be affected by this

container for example header and footer

you can place them outside the sitemap

container all right if we now save the

file and take a look at the browser the

output is not quite what we expect

we can see the main content but the site

now is not seen let me tell you that

this is the expected behavior site now

is always hidden by default there are a

couple of ways to open or show the side

nav the simplest way is to add the

opened attribute on the mat side nav

component

if you now say the file and take a look

at the browser you should be able to see

the site now as well the UI though is

not clear so let me add some basic

styling back in vs code and AB dot

component dot CSS I'm going to add mat

side nap container has a height of a

hundred percent mat side nav and mat

side nav content let's add some padding

and finally just for the side nav I'm

going to add a background color light

coral and a width of 200 pixels

if we now take a look at the browser it

is much more clear the site now appears

like an overlay on the main content and

when I click outside the side nav it

closes and we can see the main content

now once we close it though there is no

way to open it again

so rather than setting the opened

attribute like here let's bind it to a

property which we can then control using

a button we will be using two-way

binding so the first step is to import

the forms module in app module so open

up dot module dot ES

in Port forms module and add it to the

imports array

now let's go back to two-way binding in

AB dot component dot es which is the

component class I'm going to create a

new property called opened and set it

defaults next in the HTML bind the

opened attribute to the opened property

and create a button that will toggle the

opened property value so for two-way

binding we use banana in a box in tax so

square brackets parenthesis and close it

now this is going to be equal to the

property we just created opened next as

part of the main content I'm going to

add a button the text is going to be

toggle opened and on click of this

button so click handler we simply toggle

the open value

opened is equal to not off opened if you

now say the files and take a look at the

browser the site now should be initially

hidden because we have initialized it to

false I click on the button and the side

nav is shown click outside the side nav

and it automatically hides so this is

the first method to show or hide the

side nav before we take a look at the

next method I want to quickly show you

the different modes that can be applied

to a side nav the mode for a side nav

can be specified using the mode

attribute on the mat side nav component

the default mode is over mode is equal

to over and this is the mode we have

seen so far if you go back to the

browser you can see that there is no

change from what we have already seen

the site now floats over the main

content which is covered by a backdrop

the second possible value for the mold

attribute is push so I'm going to change

over to push let's see how this works in

the browser I clicked on the button the

site map appears but this time the site

map pushes the primary content out of

its way covering it with a backdrop the

final possible mode is side so mode is

equal to side

in this mode the side nav appears

side-by-side with the main content

shrinking the main contents width to

make space for the side nav so the three

possible modes are over push and side

I'm going to stick with site for the

rest of this video now back to opening

and closing the side nav we have seen

the first method which is using the

opened attribute the second way to open

or close the side nav is by invoking the

open or close methods on the side nav

itself for this method I will create a

template reference variable on the mat

side nav component hash symbol and side

nav now I can create two buttons that

will call the open and close methods on

this template reference variable button

open on click it is going to call side

nav dot open

similarly button close on click side nav

dot close let's save this file and go

back to the browser I click on open and

the side nav opens I click on close and

the side nav closes so this is the

second method the third method is to

simply toggle the side nav by calling

the toggle method this is also the

approach you might want to take when you

have a hamburger icon for example I will

create another button in the main

content and the text is going to be

toggle

on click of this button I simply call

the toggle method on the side nav

reference variable side nav dot toggle

if I now go back to the browser click on

the toggle button it opens I click again

it closes so these are the three methods

and if at all you want to perform some

action on open or close off the side nav

you can listen to the opened and closed

events now back in vs code in AB

component Diaz I am going to create a

method called log which accepts a

parameter called state and simply logs

that to the console

now in the HTML we can listen to opened

and closed events and call our log

method passing in the appropriate value

so on mat side nav listen to opened

event

and call the log method passing in the

string opened similarly on the closed

event called the method passing in the

string closed if you now head back to

the browser open dev tools click on

toggle you should see the message opened

toggle again you should see the message

closed now I am simply logging a message

but you can perform any action that

seems fit for your application so that

is about the side nav in angular

material thank you guys for watching

feel free to subscribe I'll see you guys

in the next video