Angular_routing

To use your new components, import them into AppRoutingModule at the top of the file, as follows:

 app.routing.module:--

import {HomeComponent} from './home/home.component';

import { AboutUsComponent } from './about-us/about-us.component';

import { ProfileComponent } from './profile/profile.component';

const routes: Routes = [

  { path: 'Home', component: HomeComponent },

  { path: 'Aboutus', component:AboutUsComponent },

  {path:'Profile',component:ProfileComponent}

];

in app.component:---

<h1>Angular Router App</h1>

<!-- This nav gives you links to click, which tells the router which route to use (defined in the routes constant in  AppRoutingModule) -->

<nav>

  <ul>

    <li><a routerLink="/Home" routerLinkActive="active">Home</a></li>

    <li><a routerLink="/Aboutus" routerLinkActive="active">AboutUs</a></li>

  </ul>

</nav>

<!-- The routed views render in the <router-outlet>-->

<router-outlet></router-outlet>

angular now standalone:--

navigate by Html file:---

navigate by ts file:---

we required dependency injection in our file:--

for an active route link: