Angular Material Design Layout Tutorial | Angular Layout Template Tutorial | Angular Starter Project

hi friends welcome back to arc tutorials this is angular 11 step-by-step tutorial on how to create your angular material layout from scratch for your application if you're working with angular applications chances are you are working with angular material of course the other framework that is used is bootstrap i've covered that exclusively in my other tutorial series in this particular episode i'm going to do from scratch to show you how do you go about building a layout for your angular application using angular material let's get started before i start this particular episode i'll request you to kindly check out my angular series uh on 9 and angular 10 which has more than 100 plus tutorials all the aspects of angular are covered in detail step by step with detailed use cases which will really help you learn and master angular do check it out the link is in the description box below all right so what will you be doing at the end of this particular tutorial you will be able to create a layout a template for your angular application using angular material let's get started all right so i have an empty uh directory i don't have anything here i'm going to show you from scratch so the first thing that we will do is npm install at the rate angular cli so once you do this you will be able to generate an application for your purpose like when you're doing an angular application building obviously the first thing you need is angular cli let's give it a couple of minutes uh while it is doing its job i will request you to kindly check out my channel other tutorials which are mean stack application angular 10 series bootstrap express node and much more i'm sure you will only gain some knowledge when you go through those series all right so what are we going to build um so we are going to build a header for our application we are going to build a sidebar we are going to build a main content area and footer and how are we going to do exactly we are going to generate few components for these purpose uh we are going to also install uh angular material in our application and then proceed to create a two column layout right so this will be a two column layout but the first step that we are doing is installing angular cli once you do that uh it says that angular cli has is installed so the next thing we'll do is ng new which will create a new application so i'm going to call it um say if you're building an e-commerce you're building a crm so let's call it crm application now i've specified the name of the application here right so the first command that i did was npm install at the rate angular slash cli that's the first the second step is creating an application through ng new and name of the project i have named it crm you can name it anything now it is going to ask you few options okay now here it says do you want it in strict mode i'm saying yes do you like to add routing yes and what type of css so i'm selecting scss which is sas now it will create the application if you see on your left hand side it is creating an application called crm right so once this is done we need to do couple of more things like uh installing angular material in our application if you already have an angular application you can still add it like this now there are two ways of adding it you can use ng add to install the um angular material or you can use npm package whichever you do is fine there is no right or wrong way about it it's just installing the package that being said let's go ahead and let's wait for this to complete if you are enjoying this particular episode or this channel please do considering liking the video and please do consider subscribing to my channel as well also i don't do any editing work i code on the fly runtime like live coding so chances are it takes some time a little bit few more minutes please bear with me as always uh i welcome you to uh ask me your questions or doubts uh if you are stuck somewhere ask me at surya.uradi at gmail.com this is my email id you can always reach out to me if you have any queries or any doubts all right so that being said let's allow couple of more minutes okay i'll show you uh some of things from my experience i would say that around 60 to 70 percent of the uh i would say percentage uh most of the angular applications work with angular material uh some prefer bootstrap but i'm seeing a trend where mostly angular material is preferred with angular framework so make sure that you learn stay with me on this channel so that i can share more angular material tutorials as well so that will help you learn and master the entire angular ecosystem soon i'll be also launching rxjs with angular that's one of the most uh demanded requests that i get every time so that also i'm working and should be out very soon all right so we see that the packages are installed successfully and it's ready for us the next step i told you is to add the angular material framework right so let's add it so we'll say ng add at the rate angular slash material so this is a command we'll run to add the angular material into our angular application you have to be in the project directory before you run that all right so if you open uh the project and go to a file called package.json you would be able to see the version of the angular that we are working with so see that everything is on 11 right so when we do angular material it would bring the compatible version which is 11.2 i believe and that would be added to the package as well all right so what did we do to install angular material we did ng add at the red angular slash material now sometimes people have reported that they are seeing some issues when they run this command you can also do npm angular slash material okay either commands is fine you should see the entry in your package.json for angular material right that being done said close now we are good to go so we are inside the project folder uh which uh style package i'm going with indigo and pink yes set up the typography set up the browser animations so these are some of the options it will ask you select anything you can always upgrade it anytime there is no hard and fast rule for that all right so let it allow just a minute and then we will run the application using ng serve remember you have to be in the project directory to work with so it has done its job it has updated the angular json index style dot scss all set now let's run the app so we are running the app using ng serve right so what is our game plan the game plan is in the app component let's say let's first run the app i don't want to hurry you up i have all the time in the world to help you let's take it easy and slow so the first time it will do all the compilation of all the modules so you will see the delay you do the first time not delay it takes like couple of more seconds but from the next time onwards it should be pretty fast so let it compile once it's compiled it will tell you that it's running on a certain port which is by default running on 4200 so we can see here it says it's running on localhost 4200 go to the project and refresh this is the application you would see this is a default screen of angular application so once you see the default the default screen slash view we are good to start layout to build layout okay now the next thing we are going to do is i'm going to clean up in the app you have appcomponent.html i'm going to delete everything from here except router outlet and if you are wondering why i'm doing it please do refer to my angular 10 series that i have on my channel which gives you all the details step by step guides on all use cases right so i'm not going to dig it here but instead i will just open it up and start coding now all right so i have the app component that i have used uh what we are going to also do is angular material so go to the angular material this is the i'm going to components the first thing i'm going to do is the toolbar right that's what i want so i'm going to start building my application from the toolbar because that's where i want to have the layout all right so let's get started and without wasting any time let's start building so there is something called mat toolbar that's what we are interested in right it would be in the side nav so if you go to applications and user interface you can see those examples let's go here and say we want to use a basic draw right if you just want to use a basic you can use a basic drawer container or a matte tool bar whichever you can use that's fine let's start working with the drawer okay so in the app container in the app component i have taken the code which is my drawer here just the starter one copy the router outlet move it into the main content area all right and like this so whatever will be the output it would come inside the mac drawer you will see the error because we have not imported the module so let's do that and the api if you go to the api just import mat site nav toolbar into the app module and i'm going to paste it here and going to include this matte side nav so now you should not see the error because we have included it so now it's compiled successfully all right so what i've done i have a container i have a drawer i have a drawer content this is where the main output will go into it now the next thing i'm going to do is go into the app itself and create i'm going to open one more terminal and i'm going to go into crm into the project folder and create a new module i'm going to call it ng generate m which is module right first in app component i have included matt drawer which is nothing but it will give us the two column layout that we need so i've included the mat drawer and then i'm creating a new module by the name layout okay so you see the layout is created i will go into the layout it can be a lazy loading module if you prefer that but i am making it just a normal module because that's what is going to be reused everywhere now quickly let's generate few components say ng generate header let's okay ng generate component i'm going to say footer ng generate component sidebar all right so what i've done in the layout i have added three components all right so that that will act um just like how we want so we got the three components now what i'm going to do go to my app component and going to add it here and say app header this is my header component what is this this is a selector if you are new to angular i will highly recommend that please do check out the angular 10 series where i have explained you in detail same way in the drawer content i'm going to use my app sidebar that will be my sidebar and at the end i'm going to use the footer component see with just few lines of code i will be able to get my entire application up and running soon now it says app header is not a known element obviously because app module doesn't know its existence so what we need to do we need to import the layout module from dot slash layout slash layout module now that we have the layout module included here it will still not work the reason being that we have not exported the components so what we need to do we need to copy these this array of all the components that we need outside of this module and in the exports export all the components and now you should be good so it says header works footer works all right now let's go ahead and see app sidebar so if you see here there is a app sidebar okay so we should ideally be seeing that also more equal to side and it's opened app sidebar okay so we got the header works we got the footer works and we got the app sidebar so now what we are going to do is include our sidebar and give some additional details so that we know that they are captured so let's get that done okay and we got the app sidebar but it's not reflecting let's see sidebar is exported and we have these sidebar works okay just allow me a minute let's see what is happening is there any error no error okay and what is the name here we have given app sidebar inside the mac drawer okay and we got the app layout and let's test it some more okay so we got the footer we got the header let's see the reason why sidebar is not showing up maybe it's because we don't have any data yet so what i'm going to do i'm going to add a route okay and we are going to also create some links in our sidebar so for that i'm going to use a matte list it will keep building so don't worry about it let's keep adding items as we go along so i'm going to take a matte item list and go into the sidebar and add it here now it will give you error because we have not imported the module let's import the module matlace module in our layout module and include this in our layout i'm not adding it in the app make sure that you add it to the layout okay so once we have it now let's see okay i'm going to stop and start one more time so that there is no compilation matlace should be in and we have the app sidebar and we have the router outlet okay so far good it's it's generating let's wait for it to build complete so it's now build complete that way we know that there is data out there and what i'm going to throw now is create a new route for that i'm going to create a new module let's go here and outside let's generate a module and call it users ng generate module users all right so inside inside the app let's go to users and generate one or two components i'll say list users all right so i got a users module and i have the component which is list users so now what i'm going to do i'm going to put it here and export this also the list uses component so remember whenever you work with any components outside of that module like this one it's in users but i want it outside so you need to export it so here you're going to take this app list users and go to routing and here i'm going to add a route and i'm going to say when the path is just home page then the component that it should refer is list users component okay so what i'm doing by default i'm saying the first thing that it should come so you see the sidebar has started showing up will fix the styling in just a bit so first let's do that uh here if i'm calling it app container let's style it with app container and here let's put the app container so here you will specify the width and height okay so what we need is we need the hundred percent height so let's put it hundred percent and width also i want hundred percent now you would see the sidebar is showing up so i want the sidebar to be little bit more grace right so what we are going to do we go to sidebar css and put that here so you give the same uh styling for this so if you want to give certain styling make sure that you are giving it specific not generic one for example the sidebar in this case we want the sidebar to have certain style right so what you can do you can give a class if you want that way and put a sidebar and say dot size bar and here you can give a certain width if you prefer mostly if you see the applications they will be somewhere around 200 to 250 pixel so again that depends upon how you want it but i said 200 is good enough so you see the footer you see the header now let's fix the header we will start working one by one in the header what i'm going to do is simply add a toolbar which is a header right code and that should do the work for us mostly uh it's just a header um nothing complicated so what i'm going to do i'm going to go here and in the nav right in the nav um we can see go to menu and you can see there are different formats that we can select we can use progress bar icon grid header snag bar toolbar so i'm going to go to toolbar to take this one just the basic one and i'm going to copy this code here from mac toolbar copy it move it to our header okay now again this will give you error because we have to import the module in our layout so go to api all the code all the components are available in the documentation so make sure that you do it correctly uh so that you don't miss out on it right so and then we will just copy it paste all right just a second i'm getting a call okay i got the mat toolbar and i'm getting this matte tool bar i've included in my header i should not see that error now when i go to my application it says error matte icon okay so we need mat icon as well so let's go to mat icon module okay here take this api copy it go and pay do the same in layout so whichever components you're using with angular material you need to import those modules okay so now you see we got this header that way we want and then let's style it a little bit not too much today and i'm going to so you got the header and toolbar and you say class equal to primary so that way you should see the primary styling coming up alrighty let's oh it's still not showing up okay let's see why but you can take up the existing example don't stress too much on it you already have all the information and data here not in the menu examples and go to api and you would see overview [Music] just a minute okay toolbar code and you're going to take this toolbar color equal to primary oh sorry it's not color it's color okay all right so now you see the blue color heading we got the sidebar we got the main content area we got the footer again you will keep styling them as we need so here we need some class for this spacer right so let's put that here so this is a flex right so we need to give the flex and say um how you want it to be arranged now these are simple styling uh that you can use uh with your application the way you would like uh try auto or you can say 0 0 1 and it should position um or we can say something like auto instead of auto i'm going to say 1 1 or 2 and that should do the trick so you see the icons have moved here we got the header we got the button we got the sidebar now you want the sidebar links you can always change them here right and you put the links that you would like to the route to go and you can have the links here similarly if you don't want certain styles for your link you can always customize that that text decoration none so you see now you don't have it so this is how you go about building a layout now this is an empty starter layout which you have and you see the default component it comes is list users now similarly you can give any kind of routes and any kind of um i would say component that you want to target so for example some people what they do is they'll have a common thing called dashboard or starting page or home page or profile and there you want to start it so this is how you can always customize the layout so now this is a basic starter template for you you have a header you have sidebar you have main content and finally you have footer go ahead customize it you can throw in more links if you have say you have more than one module say i'm going to generate one module and i'm going to say ng generate module roles so what you can do is you can go to roles and generate a component and say list roles now in the app routing and i'm going to add in one more route and here i'm going to say list roles component and here i'm going to say rolls and in the sidebar you would go and add that and say rolls and certainly it's not the cutty rolls that we eat it's the user roles and permissions all right so you have the roles you have the users so once you do that you might want to also throw in a path for users because sometimes users will miss that so this is how you should do default and also make explicit route so now you see it says list role works list user works right so you can navigate between different things your data refreshes as you progress along so this is a very basic template to start working with at least you will get a good head start on how you should go about building your applications layout i'll use this layout in going forward for all the angular 11 tutorials so make sure that you get this handle i'll tweak it little bit make it more styling but this is the generic layout that you want to work with i hope you have enjoyed i hope you have learned how to do it uh i'm starting a brand new series on angular material as well very soon on 11 so make sure this is the starting point for it so anything that we do will be on this template so make sure that you have the code you get your hands dirty and join me in the next episode where i'm starting a brand new series on angular material as well soon if you like my work and tutorials please do consider buying me a coffee at buy me a coffee.com arc tutorials and please don't forget to subscribe to my channel and like my videos thank you so much see you in the next episode

Channel: ARC Tutorials

Views: 6,193

Rating: 4.9016395 out of 5

Keywords: angular material layout, angular layout tutorial, angular starter project, layout angular material, layout angular, layout angular material example, angular layout design, angular layout template, angular layout framework, angular layout demo, angular 11 theme, angular material layout tutorial, angular material layout demo, angular material design layout, angular material template design, angular material admin template, angular material theme custom, angular responsive layout

Id: MBJyMW0Onac

Length: 27min 32sec (1652 seconds)

Published: Sat Apr 24 2021