 Hello guys, so in this video we are going to see how to do navigation and routing for example, this is our app that we are going to create. This is very simple app that contains one menu on the top and we have some items and if you click on gallery, I will navigate to gallery component and you can see the route has been changed. So this is what we are going to start, so let's create a new project and I just create a new project with ng new navigation. So it is asking for routing, since we are going to use routing, so we will say yes, then we will go with the simple CSS. Let's wait for its completion. So let's close it and we will open this navigation project and let's open it in the vscode, so just expand it and go to app and here we just go to this app component and I will delete everything and I just start with this order list and it will contain some list of elements, elements so we will start with the home, other three that is in gallery, jobs, let's save this and check the output here, just open the terminal to ng. Okay, so let's go to the browser and check for this local ghost. We have this part. Okay, let's go back and we will do what we will just follow some CSS. Let's go to CSS and here first of all, let's use the CUI tag to do some styling, so we don't need that list style, so let's just make it stable, go check, style is gone. Now we can define some color here, let's say background color. Let's give it black, we choose any color. So once I will choose black, you will not be able to see this text, that means this text should have some color. Let's use our eye and use the color white. Now it is coming like this, so I just want to do what? Just want to display it as a single line, so this list elements are taking the whole line, so I just want to display it on a single line. For that I can use display inline, let's use inline law, save it, and check. Okay, we got this in a one line, let's add padding here. So padding we can choose, let's say depending on your choice, I'm going to try with this 16, seems better, and what else we need? So you can see we are not getting any cursor over here, let's use one cursor as well, cursor at this point. Okay, so I think this is fine, and if you want to decorate it, you can just add this eye with hover, so that we can change color. So let's use background color, and because black, I just change it to little variation of this color. Let's go with this and save it, and you can see now it is giving you hover effect. Okay, so now we left with the other components, like home, gallery, job, and about. So let's do what there are two ways to create components, the one is you can create it manually, the another is you can use this CLI, so let's create a component folder, and inside which we will be creating the component. So the easier way is to use this CLI, I just open this component folder in terminal, and use the command ng generate component, the name of the component, that is home. Okay, so you can expand this components, and you can see your home component. Same way you can create other components, like we have here, this is gallery, same way we can create that jobs and about component, let me do it with this. Once it is done, we can simply go to home page. So I will design one of these. So what is the benefit of this? So benefit of this CLI is when you check in the app module, these components entries are by default marked in declaration. If you create it manually, you must have to specify under declaration. Let's close it and go back. And remember in the beginning I selected routing. So that is why this app hyphen routing dot module dot ts file is created. So here we are supposed to create the routes. Okay, so here we have this array. And here we can define the routes. So for example, initially I just want, this is how we create one object of route, where we specify the path. The path is basically the URL. So this empty URL means nothing is just the direct domain. Let's specify the corresponding component for this add comma component. And for this we have home component. Same way we can add other entries here as well. For the second one is we will be using for gallery. And that would be my gallery component. Third one would be for jobs. That would be my jobs component. And the last one I will be using about, that is my about.com. Just starting this done. So I just save it and come back to the browser. If you go here and check for this forward slash, so nothing happens. This is why, because we have created the route, but we have not displayed that components anyway. So if you want to display that components over there, you have to specify the location where you want to display. So that there is a tag router outlet. So wherever this tag is used, the Angular can dynamically replace this template with required components based on the route. For example, if I go to this home, let's go for that jobs. And what is happening? We have not saved the file yet. Let's save it. Come back here. And you can see this jobs is working fine. And same way for about and the rest of the components will work. Now what we left with, we want these components to be displayed over here on the click of these menus. Before that, you can either use anchor tag, but if you're using Angular, it is recommended to use router link. So let's give it empty because by default, we want to display the home page. And the same way we can use it in the rest of the unlike. Just specify the name of the path. So this path is what this path is, whatever we have specified over here like So for the empty part, it is going to the home component for this flash gallery. It's going to, you can even write without slash. For gallery, it is going to go for gallery component for jobs is going to display this jobs and for about So now display the above. Let's save this and cross check it. And I just go for that. You can see it is coming home works. You must be wondering from where the homework is going to go here in this, you can see homework is coming. Okay. So what I do here is I just go do this. Let's create a class here, body class for this little decoration path. And this we can use one more class main. And here we can simply display free. And this is I just create the corresponding CSS classes over here, dot body. And for this, I can give some background color, background color to the right color. And if you want, let's take your main class as well. And in the main, we are just doing what we will be using some padding. So that is inside that. Yep. Let's use some padding. And let's give it a little one. And save it. And let's go check it out works. This is coming like this. Okay. So whatever you were designed over here, it would be coming over there. Because what because we have defined here, that out of play. Okay, so let's do the same for the rest of the component. So you want you can do more decoration. Let me let me just do it. Let me specify the height. Let's go here and look for this body. So you can just remove these margins as well. Let's go here. We don't need any margin. And you can see some margin is removed or not. So this margin is basically coming from the body body of the page. So what to do just if you have to give the common styling for every viewer, and just you can go to the stylist.css and here for this body tag, you can remove the mark. Save this. And you can see the margin has been removed. Okay. So let's close this. And for this body, we don't need margin. Let's use the height. Let's give it a minimum height. Something let's say 98. Let's try with 92. Okay. And see. Okay. So we are again getting some spacing here. So let's go to this app and check for this. So here we have to use that margin. This might be taking the mark. Okay. So now it is fine. Now we left with what let's say this color is not coming. Fine. Let me just close check for the CSS. Okay. So what we can do, we can just use some kind of reddit. Let's use that background. And we have the linear reddit. Here we can specify to top and use the starting color, which will be coming in the bottom. And we want white color on the top. Let's try and check. You can see this is coming little bit. Same way you can apply the style and the rest of the CSS. Go here, paste it and just change this color to something else. And the same copy this. Save this. Go to the rest of the CSS files and replace some colors. Save this. And same way you have to do work from the home page. You can copy the HTML code. And you can just change it over here. And this is jobs page. Save this. And same way for gallery. Paste it. And later on you can design your gallery and whatever you want. Let's specify and save it. Let's close check. It works for home page, for gallery, for jobs, for about. So everything is working fine. Okay. This is how we can do routing and navigation. And one more thing I want to add on over here. For example, if I go for something that URL is not available, then this is showing the blank. You can define some routes as well that is not available. Or if you want, you can just redirect it to the home like you can just display the home. So that what you can do, just go to your routing. And here you need to copy this, whatever you want to display in case of the URL you have not defined, the route you have not defined. Go here in the last and you should use double history code. So whenever the route is not specified, it will match for this route and display this component. So let's close check it. Go here and close this and you can see it is coming to the right. Change it something. So that is all for this video. If you have any doubt, do comment in the comment section. Otherwise, like, share and subscribe. Thank you.