Angular Material Sidebar With Toolbar | Angular material Tutorial 33
Angular Material Sidebar With Toolbar | Angular material Tutorial 33
Step by step tutorial on how to use Angular Material Toolbar with Sidenav. Angular Material Toolbar is a container with top level titles and controls. Angular Material Sidenav is container for content which is fixed in one side of screen. Please LIKE and SUBSCRIBE if we brought value to your time. COMMENT below with any thoughts or questions.
#RaviBhai #angularmaterialfullcourse
00:00 Introduction to Angular material Toolbar
01:20 Implement Angular material toolbar
08:07 Implement Angular material Sidenav.
13:45 Collapsable Sidenav.
17:55 Modes of Sidenav
20:15 Toggle Sidenav on menu click
23:29 Add routing to Sidenav
My Computer : https://amzn.to/3i6NQUB
My Smart Watch : https://amzn.to/3w0UML2
My Mic : https://amzn.to/36bXcM0
Reference for Toolbar :-
https://material.angular.io/component…
Reference for Sidenav :-
https://material.angular.io/component…
Playlist Link :-
• Angular Material Full Course Tutorial
Toolbar Video Link :-
• Angular material Toolbar | Angular ma…
Sidenav Video Link :-
• Angular Material Sidenav | Angular Ma…
Content
4.72 -> hello friends welcome to our channel
right click education in today's video
9.36 -> we will learn how we can
implement angular material toolbar
13.68 -> in our angular application so without getting any
delayed let's get started so first let me show you
21.2 -> how angular material toolbar looks like
so open your chrome type angular material
31.28 -> open manga material dot angular dot io which
is the official website of angular material
41.2 -> click on component
45.36 -> you can see in the left sidebar there
are all angular material elements
52.08 -> scroll down
56.8 -> click on toolbar
61.68 -> so you can see here right this is the toolbar
that we generally sees in every application
69.52 -> so if you see this angular material application
also on the top you can see this is the toolbar
75.76 -> right so we will implement
this so first of all we need to
84.08 -> import the model that is needed to implement
map toolbar so let's copy this toolbar model
98.88 -> go to your app.module.ts scroll up
108.8 -> paste it here copy this map tool bar
model in the ng module import section
120.56 -> paste it
124.16 -> so i am getting some error
136.48 -> because i haven't put a comma here okay so uh
this import part is done now let's go to our html
145.28 -> and type math tool bar okay sorry mrs
build it so type map toolbar now you can
161.76 -> see this map toolbar is here let's go to our ui
and see how it looks like so go to chrome open
173.92 -> localhost 4200 so you can see right
one toolbar which is created here right
182.32 -> now what we can do here
186 -> instead of putting title here
190.48 -> or let the title be there
194.4 -> we will just put right click ok and we
will put it in some h4 tag okay cut it
214.4 -> paste it here okay so now let's go to our ui
so you can see right this is written here now
227.84 -> we can do some of the customization here so let's
see how we can do it so inside this map toolbar
237.68 -> we have something called mat toolbar
245.04 -> row okay by the name itself you can see we
can create number of rows in our toolbar how
253.36 -> we can do that so let's suppose i have given
one button here okay so let's add one button
265.92 -> and name it home okay and
this should be a matte button
278.4 -> okay and also uh let's give some styling to it
288.96 -> background color okay and also this
matte toolbar row this math toolbar
302.96 -> or this matte toolbar let's give color
307.52 -> equals to primary let's remove this
styling from here we don't need it
318.64 -> okay let's go to our ui and see
so if you see right this is the
326.08 -> primary color of toolbar and
we have this home right now
338 -> we will create another row okay and what i
will do i will add also the matte icon here
349.36 -> okay it's
355.84 -> okay now let's see so if you see this is
with the icon only let's give some space here
370.24 -> so now this is fine right now what we can do we
can add one more row okay let's add one more row
391.44 -> menu and remove this one let's go and
see so if you see right we have two rows
401.12 -> one row has this home button and
one row has this menu icon right
408.8 -> so this is the customization that
we can do with the toolbar okay
415.6 -> so uh we will remove this title from here
427.52 -> okay we will in the same in the first row only
437.04 -> we will put this menu
441.84 -> okay
445.92 -> put it here here only give some h4
time and write kill it okay remove this
466.48 -> now let's see how it looks like so if you
can see here right this is the toolbar
474.8 -> implemented here with this
title with this menu with this
481.6 -> button home so these are the
different implementation of toolbar
489.36 -> now we will implement the sidewalk with this
only so let's get started so first of all
499.36 -> we need to import the api that is
needed to implement the matte side nav
506.72 -> okay so copy this matte side nav module
go to your app.module.ts scroll up
519.44 -> paste it here copy this matte
side more matte side nav module
529.28 -> paste it here so we are done with the import part
now let's go to html and try to implement mac
536.88 -> site nav so in order to implement matte side
nav we need mat side nav container okay so
553.68 -> this container will have two parts one is the
side nav bar and one is the main content okay
563.68 -> so for that for the side nav we we will
have this matte side nav tag okay here
573.44 -> we will have suppose let me provide one link
to it let's provide it home okay and another is
591.92 -> side nav
596.56 -> content okay so here all the side
nav component will there and here
604.96 -> the corresponding component content will be there
618.24 -> so if you see right
623.04 -> this matte side nav
627.68 -> is the side nav and this matte content
635.12 -> has the content part let's go
to our ui and see how it looks
640 -> so right now you can see and this is the content
part but we are not able to see the side nav right
647.84 -> so this is the expected behavior now let's go and
fix it so what we need to do we need to by default
658.64 -> set this matte side nav is
as open okay so let's do it
667.28 -> so i have done it opened okay now let's see how
it looks so if you see here right this side now
675.28 -> is here and the content part is here right now uh
681.52 -> it's not looking that much good so let's go and
do some styling so let's go to our css type mat
699.52 -> site nav container and let's
provide some styling to it
712 -> give some height to it
715.36 -> so i will provide some height
731.36 -> 205 vh
738.4 -> okay so we have provided the height
now let's style matte side now
750.4 -> okay
755.52 -> so
758.8 -> give this match side nav some
width okay suppose 200 pixel
771.84 -> and give some background color
777.36 -> let's choose this one okay now let's go
to our ui and see how it looks like okay
789.04 -> so you can now see we have this side now
okay and this main content is here right now
802.96 -> what we will do we will make this as
a white so let's change this color to
814.72 -> has triple e now let's go see here
now it's looking much better right
824.8 -> but if you see here once i click on the content
part right this we are not able to again
834.4 -> open the side nav right because once it is
hidden we cannot open it because we have
844.32 -> used a keyword that is opened now what we
will do we will do two way binding in order to
854.8 -> make it working okay so let's do it
861.28 -> go to your app.component.ts
867.2 -> create one variable open equals
to false okay now go to your html
881.92 -> remove this opened okay
891.04 -> in the content we will add one button
903.44 -> add matte button okay we will
name this button suppose toggle
914.08 -> toggle means we can open or hide the
side nav okay now what we will do
928.56 -> we will use a two-way winding
935.28 -> now let's do two-way winding okay and
in order to do the two-way winding
942 -> you should have matte form mod
uh sorry form modules imported
948.8 -> okay i had already imported this form
model if you see you need to import it okay
957.44 -> so make sure that you have this form model now
we will do two-way winding we have created one
966 -> variable here open equals to false let's go
to html that side now let's do two binding
979.44 -> append equals to operand so it will toggle
and how it will toggle on click of this button
991.36 -> so let's add one event click
event ok to this button
1006.24 -> opened
1009.68 -> not
1012.32 -> close to open okay
1019.68 -> now let's see how it's it's working or not
let's go to our ui click on this toggle
1034.96 -> nothing is happening right so
we must have made some mistake
1038.72 -> i can see it so opened equals to not open okay
1046.64 -> so let's see on the ui if it is working or not
let's go to our localhost photo level video
1053.2 -> click on toggle now you can
see right we can toggle right
1059.84 -> but when i click on toggle the
main content is hidden right so
1069.12 -> how we can uh avoid that so basically uh
this matte side nav has three modes so let's
1080.8 -> check what are those modes so let's first give
the mode equals to over okay let's go to our ui
1096.48 -> click on toggle you cannot see any change right
1100.56 -> so basically this is the mode we have worked
so far okay now we will change the mode
1110.24 -> so the second mode is push let's
go and see if i click on toggle
1119.04 -> now you can see right the content has been pushed
to the right right so this is the push mode
1129.68 -> the other mode is side now let's go to our ui
1137.44 -> so if you see right this is slided to the
right and content is also being slided okay so
1147.52 -> uh for the rest of video we will use this
one only this mode side mode only now we will
1158.32 -> do some customization to this side now
okay so what we will do we will add some
1169.2 -> hyperlink okay name it as suppose home
1180.32 -> okay
1185.92 -> so this one
1200.48 -> so i have put a hyperlink as
home let's see how it looks like
1210.16 -> so it's coming here right
1215.12 -> now what we will do we will add a menu button here
1222.24 -> and we will link this menu button to the
side nav so that on click of this menu button
1228.32 -> this side nav can do a toggle okay let's
do that so let's add one button here
1239.2 -> okay
1243.12 -> it should be math button okay and add matte icon
1260.72 -> name it as home so it will show the home icon
1268.24 -> sorry we need menu so let's name it
as menu now let's go to our ui and see
1276.24 -> how it looks like so now you can see
this is the menu button now what we
1279.92 -> will do on click of this menu the side nav
should toggle okay so let's go to our code
1289.68 -> now what we will do we will
1296.32 -> use this button
1302.24 -> crop this button and
1315.28 -> we will use this click event to toggle
between toggle the side navbar okay so copy it
1328.16 -> let's go to our button and paste it now
let's remove this button we don't need it
1341.12 -> okay fine now
1348.8 -> let's go to our ui and see if it is working so
what we have done so far on click of this button
1356.88 -> the side nav should toggle right click on it
you can see right the side nav is toggling
1366.64 -> right so this is working now what we will do we
will add one link here and this link should route
1377.28 -> to the corresponding element content corresponding
components content right let's do that
1386.32 -> i have created one component already in order to
save time you can also create a home component
1392.56 -> you can do by using ngg c and name
of component okay ng for angular g
1399.84 -> for generate c for component and the name of
component the component will be created now
1408.08 -> let's add some routing to it okay in order to do
that go to your app.routing.module.ps okay let's
1421.2 -> create an object okay give the property path
1430.32 -> name it as home so if you provide the path name
as home then it will route to the component
1443.28 -> name the component home component
okay so you can see if path is home
1451.68 -> the routing will be done to the home
component okay let's go to our html
1460.96 -> let's bind this route okay
1467.44 -> let's bind this route router link equals to
slash home let's repeat it with button okay
1491.68 -> let's copy it paste it here so what will happen
1498.96 -> the button click will route us to the home
component right so let's go to our ui and see
1511.28 -> click on this
1516.8 -> menu button now you can see here one button
1521.04 -> right now on click of it it should route us
to the home component but it's not happening
1532.32 -> let's check why it's not happening so whatever
routing we are giving here the content should
1538.72 -> be rendered here so for that we need to add
router outlet here okay router outlet so that
1553.52 -> the content should be shown here on click of
this button okay now let's go to our ui and check
1568.08 -> let's go to localhost 4200
1573.28 -> click on this menu button
right now nothing is here now
1583.6 -> click on home if you click
on home you can see this
1591.6 -> the content of home component is here
okay now let's make it little bit good
1604.16 -> let's remove this button
1610.16 -> we will use matlist to show list of routing okay
1622.72 -> mat list item and in order to work
with it you also need to import
1632.96 -> matlist module make sure you have imported
it okay so let's cut it paste it here
1649.44 -> let's copy this one and paste
1656.48 -> okay let's see on the ui how it is looking
let's click on it now you can see we have
1666.8 -> this three routings right you click on all
three it will redirect you to the home screen
1674.24 -> now we will configure the route so that
1682.16 -> if by default user goes to our page they
should see the home page so if there is no
1690.16 -> routing then it will by default to go to the home
component okay let's go to our ui remove this home
1702.88 -> so if you see by default it is coming
to home screen and if you click on it
1707.84 -> you can see these all routings
now let's create some component
1714.88 -> so that it will better for you to understand
how things are working so let's create ng g c
1727.04 -> name of component that is
1730.96 -> about us
1737.84 -> again create one component
1744.24 -> contact
1748.88 -> now let's add some routing for it
okay we will add the same routing
1758.72 -> path should be contact for contact
1770.88 -> component
1774.4 -> path should be about for about us
component let's go to our html and name it
1791.84 -> about
1794.96 -> contact us
1802.64 -> okay so let's go to our ui and see
1811.76 -> nothing has happened because we haven't
compiled the code so i forgot to compile
1816.16 -> the code compile the code by doing ng serve it
will take couple of seconds to compile the code
1823.28 -> let's go to our ui and see if this is working
let's go to our ui the code is still compiling
1835.6 -> so let's see if it is working or not
1840.72 -> it's taking a little bit time it has compiled
1848.48 -> so you see by default we are at home page click
on this menu button you can see home about doesn't
1857.92 -> contact us let's click on home it will show
the home component content click on about
1868.4 -> okay nothing happens contact us nothing happens
why because we haven't added the routing to it
1877.52 -> let's add routing about
1886.88 -> contact let's go to our ui and again see click
on menu you can see about us about and home
1899.92 -> and contact us click on about now you can
see we are routed to the about us content
1906.8 -> click on contact us you can see we are routed to
contact us component in this way you can configure
1915.44 -> your routings in the sidenav bar okay let me do
some styling stuff also so style text decoration
1936.72 -> is none let's copy this style and put it for
1949.76 -> every anchor tag now let's click on menu now
i think it it's fine for you to understand
1960.64 -> right click on home it will route you to home
component click on about it will route you to
1966.8 -> about us click on contact us it will route you
to the contact us so this is how we can implement
1977.12 -> toolbar and match sidenav also if you
haven't watched our toolbar video you can
1987.76 -> see the link that i have shared in
the description box for the playlist
1992.32 -> okay so that's it for this video if you
haven't subscribed our channel please
1997.28 -> do subscribe and share the video to get
more updates thanks and have a nice day
Source: https://www.youtube.com/watch?v=lgbc-eke5Vc