Using Angular Material's SideNav and ToolBar

like any other typical web application the bb bank is also going to have a side nav and a top nav sidenav going to have the links that will take the user to different areas of the application whereas the top nav is going to have a username a user profile picture and a drop down with some links like logout and some others we will see when we'll be working on this application both the side nav and the top nav are going to use angular materials controls for side nav we are going to use angular material side nav and for top nav we have for top the toolbar we are going to use angular materials toolbar in one of the videos earlier i explained how we can incorporate angular materials in our project along with how to incorporate bootstrap in our project i'm going to paste the link of that video in the description so that you can understand how to incorporate these libraries like angular material and bootstrap using angular cli so before we begin let's understand what we have right now in our application so in our application right now we have a simple project structure that was created using uh ng new and we added some blank components for different areas of an application we added a component for dashboard deposit funds manage account open account transfer um fonts but these components have actually nothing in it right now so they were just added by creating an angular using an angular cli ng generate command so like we discussed we have index.html page that has an app root uh mentioned here and this is where we are going to inject where angular actually injects uh whatever is in appcomponent.html and appcomponent.html have nothing in it other than a router outlet this is a place where it is going to inject the components for which we the user is trying to visit our visit our route and some of the routes are also mentioned here in the routing module we have routes for a few of the components but but those components are just empty so in this lesson we will try to understand how to use angular material site nav and toolbar and this app component is going to serve as a skeleton of this application so let's begin with angular materials side now here i am at angular material side navs page from aggregate material on angular materials website a site nav has basically uh two areas there is a drawer content the one that comes from the left side and opens and closes and then there is a main content where we will we will be injecting the components that will be visited by clicking on the links on the side on the left side and both main component and the side component will be placed inside uh matte side nav container so there is going to be an outer thing which is called matte side nav container uh that mad um site nav container is going to have our drawer the the thing that opens and closes on the left side and then it's going to have a main content like that the drawer component is designed to add a side content to a small section of an application but if you want to do it for the entire page where it creates a layout with the left position side nav and explicit explicit content then we have to use this matte side nav container so we will simply copy this thing and we replace it in app component and remember the app component is the one that gets injected in place of app root which is the part of index.html so as described earlier it has an app sidenav container that contains the the whole thing and then within the app sidenav container we are we have app side nav which will be having the left side of the application and then it has app site nav content which is going to have the right side of application where rest of the components will be loaded since we know that we have something called router outlet and whenever someone visited our visit a root uh the that's the specific component gets injected in place of a router outlet so we will simply place router outlet here and our side nav is not a simple side nav it's a bit bit stylish side nav it's going to have its html and css and styles and uh so for that we are not going to put everything inside here instead we are going to create a component called the sidenav component and we will put that site knife component here instead of putting the entire html of the site nav here so let's create that component using the command ng generate component and it's going to be the site nav component so now we have a sidenav component and this sidenav component will be referred using this thing so we are going to place this sidenav component here so this app side nav is going to be replaced with uh not actually replaced but it is going to hold the style of this left side now and also these icons and also these links but before we do that let's set up some basic page styles so that our overall page looks good please note that html and css is beyond the scope of uh this lesson i might be copying some html and css snippets uh i might be explaining it a little bit but i don't want to waste time typing that html and you know going over all the css styles uh because that that is kind of beyond the scope of this lesson so in our style.css we are going to import some uh font awesome um fonts and then bootstrap is has already been added so we will have our body at 100 height we will have some html for the body as some styles for the body uh we are just setting a good background color which which you you saw in the application there is a blackish gradient black background color so we just set up that and then we are going to add the side nav um component uh in the imports array we are also going to set up a schema and using a custom element schema and for that we are just going to create an array of schemas um that will be done right here and uh we can simply add a reference to it from angular dot core angular core so what we have is a matte side nav container and then a matte side nav within that we have our custom component which will which is going to hold the html and styles of our side nav and then this is from mad side uh mad side knife content which is from angular materials it is going to have uh holes all the components um that will be visited uh and those components will be injected in router outlet we are going to give it an identifier and we are also going to supply it with a class called open um this class will actually open the side nav by default and we are also going to set a mode of this to site so that we know that this sidenav is going to be on the side with that let's see what's the output of it we are going to spin up the server and let's also save everything so let's visit localhost 4200 and yeah we have a site nav on the left and we have um sidenav contents on the right and since we are visiting the default route and default route was supposed to uh inject the dashboard so it is injecting dashboard and if we are going to visit let's say manage accounts the manage accounts will be loaded in that place now that we know that we have a side nav in our application let's style this uh site now i'll be copying some of the css and html and i'll be explaining them a little bit so let's jump over to the um app sidenav component so so when we uh created this site nav we got an html of it and we also got a css of it um and in our application as you can see we have a site nav and then we have a logo and then we also have a name um called bb bank so let's do this part of it first so let's see what we've got we have just an outer div and then we have a class log logo which is going to place the logo of this application and then uh we also whenever somebody clicks that logo we want to you know uh go to the default page uh which is which is going to be the dashboard so we have placed it here and then there the image which i just saw which is just an angular logo uh it's going to be uh inside this a div so if somebody clicks that angular image angular logo uh it will take it to the default page which which is our dashboard and then as you can i just showed you um next to the logo there is the name uh of the application written which is bb bank so it is just simply coming here so this is a simple html and then the this class logo on this class side now let's see let's play let's place it here in our css so it has the background color you saw it as a reddish kind of a gradient background color it's going to have a height um a proper width width on the left side of the application a bit of a shadow and then we're just positioning the logo here and then giving some uh animations um and transformations and then uh the text on the um the hyperlinks uh how how they will look like we are also styling that uh list to you know uh look them uh make them look good and then when we hover over those links uh you know they're gonna change color and a bit of an animation there as well so it just has this kind of a thing right now so the actual uh links that we are going to place here uh we are going to place here as a list so what we are going to do is that we are going to style this list and then we are going to have our default route and which will take us to the dashboard so if somebody is trying to uh visit uh a default route so let's go to our route and let's see what it looks like um so our default route is going to be like uh an uh empty route right now so if somebody is trying to go to slash it means that they will be taken to the default company which will be the dashboard component and then um so after that we are just going to have uh our route for our other components so let's pick up one of them uh let's pick up our route for manage accounts so [Music] so there will be if somebody clicks manage account they will be taken there so let's do manage accounts here and then same way if somebody clicks open account they will be taken to the open accounts component using router outlet and i also placed a icon this angular icon which is going to be shown on the side nav i also placed it at the correct location so what we have right now is the sidenav css file which is styling the hyperlinks and also styling the side nav background color and the logos and the text on the side nav and the classes that are mentioned in the css are placed here on the outer div on the logo and then also on the also on the the hyperlinks and please note that we are using the router link from angular this router link will be actually taking us to the component that is set up against those particular routes and we also have some let's uh save everything and let's see what it looks like so if we [Music] go to the application um on port 4200 we can see that we have a side nav um it is styled and it has everything it's just that it does not have a height because the content which is on the right side of it has no height so we are just going to give some height to this part so we are going to go to the dashboard [Music] and do so this is the dashboard and we are just going to give it some we're going to put it inside a div and then we are going to give uh a hundred percent height to this uh or or 600 pixel height to this um um dashboard uh component so now you can see that we have um a full uh height of this dashboard component and because of that because of the content has a height because of that the site nav also have a height we have the font awesome icons also coming here the hyperlinks are also properly styled and the path to the logo is also resolved properly so the matte left nav bar can be opened and closed um using some some actions on that side nav bar uh so we have an action called open which will open it close which will close it and toggle is going to you know reverse it if it's open it's going to close it and it's going to if it's closed it's going to open it but to perform these actions we are going to use angular materials top nav now this top nav is actually going to have a button on the left side and uh using that button we will be opening and closing this side nav as you can see the uh the the tall the toolbar uh is going to be on the top of the application and the side nav and the side nav contents are uh below that uh toolbar so what this actually means is that um we are going to place the toolbar somewhere here so we are going to create a component called toolbar the newly created toolbar will be injected here so remember that this toolbar is going to control the side nav and then to refer the side nav inside the toolbar we are going to take an input parameter inside the toolbar so let's take this parameter it's going to um look something like this it's go it's going to be an angular's input parameter which will be of type matte side nav so to consume this parameter we are going to place it in the app toolbar inside app component and then we will use this input parameter and the value of this input parameter is going to be the identifier of our site nav so what's happening here is that we are connecting the toolbar with the site nav in the html of the toolbar uh we are going to have a navigation and this is going to have some styles we will look at those styles later but the most important part is that it is going to have a style button uh using the html a tag and then when this button is clicked the input variable that we just took um and that input is actually the side nav we are going to call toggle on that click and if you go to the port 4200 we will see that at the beginning um and the site nav is closed the reason for that is that in the app component i removed the open class so instead of using an open class we are going to use this arrangement of input side nav input variable and on this um click we are actually going to perform the toggle operation um so this toggle operation is being performed here on the toolbar component so when a button on the left side is clicked it is going to perform a toggle so whenever we click here you can see that if the quite of animation the side nav is opening from the side the other part of the toolbar was this logo and the name of the user uh that is logged in right now we don't have an authentication but uh in later modules we will have authentication but um this the the image of the user the name of the user and the drop down i am going to use um some html here so um it just has that default image you saw um just an anime image a name right now just put in my name and then it's um there is a div um which is style to be a small drop down button and then within that there are going to be two hyperlinks using html8 tag and then they are also styled all of these styles are um are here um they are just simple styles we are just setting up a background color to match the background color of our application the side nav buttons are styled the whole there is an over over effect and then 100 percent width to the image we have and then uh the photo is going to be a small circle so that's why we have a circle radius of a 50 percent photo is going to be in the middle or flow dividend um there are some normal styles here like i mentioned i mean explaining each of these styles is beyond the scope of this application so so this uh small button right here is actually going to toggle uh div open and close and then the way these two things are linked here is using this id so the toggle button on the left top uh have an id called nav bar drop down menu link and this is the same id that is used here inside the div that is going to be opened and closed so let's uh save everything and see the effect of it so as you can see now we have our toolbar if we open uh click the button we can you know open and close the side nav and then we have a we have a name of the application uh name of the user who is logged in and its image as well um when i'm clicking it it's not opening to make it work make sure that you have uh these three javascripts uh in your index.html a popper.js bootstrap main.js and uh this slam.main.js so now that we have that uh you can see that our drop downs are also opening our side nav is also opening closing and if we go to a different route it also works it's just that this route does not have a proper height but if you go to the dashboard route it will work

Channel: Patterns Academy

Views: 14,668

Rating: 4.6774192 out of 5

Keywords: Angular, Angular-Material, WebDevelopment, SideNav, ToolBar

Id: mEHzO07-gD0

Length: 23min 28sec (1408 seconds)

Published: Sun Feb 21 2021