Angular Material: Sidenav (Expandable/Collapsable) 1/1

hi and welcome to this short video as you can see in the background we are making a very simple seidner that is either expandable or collapsible and we will do this with angular material and first in this video we'll have a short look at the outcome of this video and then we will go through all the steps in the development process and um here this repository is also available on github so you can just find the link in the description and check it out so let's have a short look at the outcome of the project so you can see here we are having like our site now and beside our content on the right and we can expand it or we can collapse it we can if we click on it when you see here we are loading different components and here we are having a met toolbar so in this here in the code we are having here our app routing module then we are lazy loading the dashboard module the dashboard module is having a wrapper component this is basically this thing here where we have our content or our site map and our content on the right and then we are loading the children dashboard info user depending on the route here so into this here and then you can see it here this is our wrapper component and then we have all our dashboard input user components that are being rendered into the router outlet from our wrapper component which is displayed here so as you have just seen we are just making very simple angular material side not navigation that is expandable or collapsible and this means it's either displaying like just the icons or the icons with the text and on the right side it's displaying like the content for example from the dashboard and so on whatever you choose to click on the left side and the navigation so for this to work we just need to set up angular so if you don't have angular install on your computer just do it and then you can use the new command to generate a new angular project so i can just say in angular or ngnu to use the angular cli and say let's call it expandable sitemap and this will make a new folder and install everything or set up everything correctly for angular you can see it here and we'll now install all the packages so i'm now having here my expandable site folder and there's everything that's being generated now from the angular cli so i can open it with visual studio code and i'm already having here made the font size bigger so it's easier for you to follow me and here we can just open another terminal where we can do all the stuff when the installation of all the npm packages is finished so we can while this just go a little bit through the stuff that we are doing now so we want to use angular material angular materials just design components for angular that are specific or that integrate very good with angular so we just want to use them so we have like um you know we can save some time and we can go to components and see what we want or what is all available and what we want to do here is we want to use the angular sitemap or angular material site navigation so we can have collapsible site content with primary content so like you can see it here this here is our sitemap and this is our primary content for example so here you can see it here and there's main content and there is like the angular let's see it here where is it the site nav container and this is basically used if you're having like a full-size angle application and there is also um the net draw container um or how it is called i think yeah to our container and draw content which would be just if you want to display something here like a little not on the home page for example this you would be beside now and this here on the right could be like withdrawal so let's see if everything is finished so you see now we have installed everything here so now we can start working here and first we want to add angular material so for this we can just use an angular or yeah cli on the harmonics to set up then our project with angular material and so we just execute this command and then everything should be done automatically and yeah so we want to use our sitemap component so let's have a quick look when this is finished and so basically at the moment we can all so start making some changes here so you can see here in our app component html there's some yeah let's say basic stuff that we don't need um so we can delete it completely and let's uh say we have here just our router outlet and then we could go and make a new angular module so we could say with angular cli and angular so in g generate and then we say m for module and then we say for example we want to generate a dashboard module or yes and so this will now generate for us our dashboard module yeah so now you can see we are having here just our dashboard module it doesn't have any routes or anything else so we have here we are on our base from angular and we can just say here we want to route everything to our dashboard module so let's say our path is empty and then we want to make lazy loading and load our new dashboard module so we can just say we wanted to import from our module so from the dashboard from our module here and then from this we just wanted to use our module dot dashboard module and then we can start working into or inside our dashboard module so let's go and see into it so we can zoom into source app dashboard and let's see if the material is completely inside so let's use the basic styles other thing go back to our terminal here and now we can generate some stuff so first for example we could make a routing module so let's say that dashboard minus the routing.module.ts and yeah we can just copy paste a bit so we are a little bit faster rename it correctly dashboard routing module and here of course we don't want to do this and here we are not for root but for feature tried and this is not called a broader module but dashboard routing module and then we are going to import this into our dashboard module here and then we can now we are ready to start let's see now we have also angular material installed and then we can start generating some components so let's say at first we want to have like our page component that is like a wrapper or we can also call it wrapper where we have our navigation and then the content on the right and we can also say we want to make this into a components folder and then we just call it wrapper and then this should generate a new folder here in our dashboard module that is being called components and there we will have our wrapper component we will also make like let's say dashboard a new component then like an info component and like a user component so just that we see if we had different routes and that the content here on the right and this year changes so let's say info and user and you can see when we are using the angular cli it's already being directly imported into the right modules so now they are all these components here i'm pointing to our dashboard module and we can just work with them here so we can answer it here and reserve this is the command to start angular just to see that everything is running correctly and then we can start implementing the stuff so what we want to do here or want to have is we want to have like our wrapper um with the side on the left and the content on the right so what we need to do is we need to add some routes so let's say our path here and then we are having our component which is our wrapper component and then let's see if we can see this before we go on so we have to wait here and we can also make here a little bit of redirection so let's say when or whatever our path is we just want to redirect to this and the path match could be full now you see it has compiled everything and now it's generating the browser bundles and yeah let's see everything should be here so we can go to localhost 4200 and then we see here wrapper works and so this works because here on the top of our project we have our app component html where we have our router outlet this means that if we get the route then we are lazy loading the dashboard module into our router outlet and so this is displaying the content from our wrapper component from our dashboard module so we can go on with this here and now what we want to do is we want to display here on the left the side map and here our content from the components so what we can do is our our dashboard routing module this here is becoming or is getting some children so this means like before where we rendered everything that i was sitting here the base route here so everything that was displaying the dashboard module inside our router outlet then we will have here in our wrapper component some stuff here and we will also display our router outlet so whatever route we are hitting so then we can say our first children would be the dashboard route and here the component to be displayed is our dashboard component and then this route here would be localhost 4200 and then slash dashboard since this is here always empty so this should be our route just go here so you see here we are just having the wrapper and as soon as we hit the dashboard route you see we have wrapper works and dashboard works so this works as expected and we can now let's close this and now we can add like the routes for all our other three components so let's say we have another path info this is displaying the content from the info component and we will have another path for user and this is the component user component so this is like all the setup stuff that we need here and if we want to we can like we did on the first on the higher router module we can also add some redirecting to here so whatever we get here we redirect to for example let's say to the dashboard route and we can say match so let's see if everything is working so let's see dashboard this and when we get something else we are redirected to dashboard or if we go to info then we have the component rendered here into our router outlet so now we can go on and for this to work now we have here our router or our wrapper component and now we want to display our site map on the left so for this we can use the sidenap container and at the moment it doesn't know it so we have to add all the stuff to our module and then we can just say and then we yeah we need our net toolbar module then we have to see where we can import them one second so we need the website module module then probably the map module okay let's google that i don't know why sometimes my angular tutorial is not directly getting all the imports so we will need the icon module because we will use some icons later we will use um probably a matte list module see that list and at last we will need for i think the met toolbar module that we can use toolbar module toolbar is basically um something on the top of your page so we can use this also to make a little bit nicer looking and i think this should be all we need if not we can import it later so now this should be familiar so now it's familiar and we can add all our stuff so we have here our site up container and then um on the left here we want to have our side now so we add here our material side knob and on the right or next to it we are like having just a dip where we display our content and inside this stiff then we want to render then the top of the route wherever we are so we'll try to drill different components from our routing module here so this here these are being rendered into our router outlet from the wrapper here so you can see if we go to our route now we're just having the info because we are not displaying anything but we are now having here our material inside now and we can just say um here we want to display a single matte list and then this list is having here some entries so let's say matte list item let's just make it for testing purposes you can see something here and i think we also have to add something to our material side now so we want for example give it an id let's say site now we can say mode and we say on the side and we want to have it opened set to 2 so it's always there when you see here yeah something is here and now we have to make a little bit better looking so at first for our sitemap container we have to say how large it should be and so for example we can say this should have a height of 100 so we can make it very simple and just end this here and say the height is 100 and now we see we are having 100 height and here you see also the list now you see here we have our sitemap container this is complete page and on the left we have our side now and on the right our content so we can now work on here and now we want first to add all the correct items so our first list item should always add like material icon and this could also have the net list icon and we can give it also some classes to make it look better and we can use this here later to expand our side now or to make it smaller so just to display the icons and with the material icon so you can just for example go to angular material icons and just search for the icons that you need a bit so here you have all the icons for example we can use like a platform um and so you can just use the name here we can say craft run right and then this icon should be displayed let's go to our play tree and now you see we have here the icon i can hit it but at the moment nothing is happening and so we just want to use this later for expanding our side note or to close it and now let's make the other items so make let's make another list item and this should be our dashboard so let's say that icon you can let's copy it a bit so faster and this is not the icon but the platform but for example you can use the home icon for this and then in a span you can display the name so for example dashboard and now faster so the home could be for example let's see we can use the home icon but we already used by the dashboard let's say let's use this here so you can just for example click on it and then you will see the name here so you can just display it here let's say home and then we can use this here the name info and this you should have the name user and then for this i think probably this an icon for user let's see no there's no icon for a user let's see and let's just take this icon here supervisor account and so now you can see we have here all the stuff and now we expanded for example with here then this should be displayed if we make it smaller than it would be being wrapped so that we can just see the icons so how can we do this we can just use basic angular stuff so angular directives and so on like entry it and we can do this by giving our component like a boolean value if at the moment something has expanded or not so we can say this expanded which is a type boolean and we set it initially to false and then we can bind something in our h to it so we can say for example that our um chevron icon here which with which we want to expand or collapse um our site navigation we can just add the click event to it and then we want to do something and so we want to set our is expanded always to the opposite so if it is true and we click it when it's set to false if it is false when it's being set if you click it to the true so always be opposite and here so now we can always in our span just use the ndf and say we just want to display this dashboard here if the moment we are expanded and this should be done for everything so we say here also if this expanded is set to true then display the name info if not then don't display it so we just use it here also and then we can see this is working so you see since we initialized it here with false at the moment the text is not displayed if we hit this icon then it's being set to true now we can make it here this is basically the stuff that works now we can make a little bit fancier so we can for example let's say for this icon here there we can bind it to energy class and we can give it a class um let's say rotate it when this expanded is true and then we can give this here also class let's say chef run button and sign up button and then we have to go to our css now we're in our setup container our net site now and then we have our met not list so then our met now list and then we have here our icon so this is having traffic button sign up button so we can say button and then we can just add the css that we need so for example we can say basically um here the traffic button should be like have a transition of the 300 milliseconds ease in and out and then we want to transform it and let's say rotate zero degrees and let's say we want to also display it not here on the left but on the right to make it better looking so we make it to ride and float right and we position it as absolute and see you see now it's here always on the right and but now it should also rotate so now it should be looking not too red right side but left so let's think about it so we can say if we hit traffic button and its rotated class is assigned so move the entry class here when is expanded then we just make another transform and rotate around 180 degrees and then this should be looking to the left side so now you see it's rotating always if the class is um applied from angular from angular so i think this should be on css and now we can for example um see yeah why not so we could for example adhere in our div we'll say this here is our content class and then we have here our toolbar so this is just our material toolbar and in our toolbar yeah what do we have to apply i think nothing and we can for example say here h4 and say hello everyone and let's see if everything is working correctly so you know you can see we are having here on the left our side knob so if we hit the button here when it's being expanded if we hit again it's collapsed now you see this here is actually not correct because then if i expand this this should be here and this should not overlap so and to fix this so we can just add here for to the midsize container the outer size and then this should always check for the size so you can see here now content is here and if i hit dashboard when i'm having here moment info then for example if i go to dashboard having the dashboard so we could now say for example so when we have imported our router we can for example just say for our met this item i think let's try router link and let's say we want then to go to this class here this is empty we don't need this stuff um and then with our router link we want to go to the dashboard route let's see this is working on the info rod and with the dashboard then we're going to the dashboard route and so we can make this answer here for router link and then go to the info route and here we can also say auto link and then we want to go to the user route and now you see every time we have a button then we are having here our router outlet to display the component that we are in expand it this still works here and we have here our toolbar so now we can commit everything and then just save it together so we can say give it and let's say edit dashboard module with wrapper or displaying the sidenav and the sidenav content um are displayed within the router outlet

Channel: Thomas Oliver

Views: 10,786

Keywords: javascript, typescript, nest, nestjs, nest.js, angular, typeorm, git, gitflow, node, blog, development, api, observables, rxjs, nestjs7, bcrypt, jwt, authentication, git-flow, gitFlow, pagination, paginating, nestjs-typeorm-paginate, angularjs, angular-2, angular 2, angular9, angular-material, angularMaterial, angular material, reactive forms, reactive-forms, reactiveForms, regex

Id: b9s92R5gx8g

Length: 34min 48sec (2088 seconds)

Published: Wed Mar 24 2021