In this video we are going to learn about Routing.
In Angular The Router module handles the navigation & Routing.
The Routing allows you to move from one part of the application to another part or one View to another View.
So lets see how can use Router in angular 10.
So first of all create some component.
So switch to the command prompt run the command.

ng g c components /home

ng g c components /about 

ng g c components /contact

Okay now all three components have created.
Now switch to project and just open app-routing.module.ts.
Here import the components.

import {HomeComponent} from './component/home'; 
import {AboutComponent} from './component/about'; 
import {ContactComponent} from './component/contact'; 

Now create route so inside this array just write here.

const routes: Routes = [ 
    { 
         path:'home', 
         component: HomeComponent. 
    },
    {
         path:'about', 
         component: AboutComponent. 
    },
    {
        path:'contact', 
        component: ContactComponent. 
    },
]; 

No go to the app.component.html file and here add.
The bootsrrap nav bar.
So just go to the getbootsrap.com and here click on documentation.
Now search here navbar and from here just copy the navbar code.
and paste into the app.component.html file now make some changes.

<nav class=\"navbar navbar-expand-lg navbar-light bg-light\">
  <a class=\"navbar-brand\" href=\"#\">Navbar</a>
  <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">
    <span class=\"navbar-toggler-icon\"></span>
  </button>

  <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">
    <ul class=\"navbar-nav mr-auto\">     
      <li class=\"nav-item\">
        <a class=\"nav-link\" routerLink=\"home\">Home</a>
      </li>    
      <li class=\"nav-item\">
        <a class=\"nav-link\" routerLink=\"about\">About</a>
      </li>  
      <li class=\"nav-item\">
        <a class=\"nav-link\" routerLink=\"contact\">Contact</a>
      </li>    
    </ul>    
  </div>
</nav>

Alright all done so lets check.
Switch to the browser and here you can see the navbar.
Now click on home.
You can see here the home component content.
Now click on about.
About content.
If I click on contact.
You can see the contact component content.
So in this way you can use routing in angular 10.