Routing your Angular2 Project

In order to work with different modules in your web project it is essential to create Routes so that you can easily navigate through your navbar components or sidebar components.This article will help you to get through navigation by importing RouterModule.Make sure that you have installed Angular CLI.

Import RouterModule

To import RouterModule move on to your app.module.ts file and import using the following code.

import { RouterModule,Routes } from '@angular/router';

Then add the RouterModule to the imports which in the below of the same file.

RouterModule.forRoot(appRoutes)

Now create the path to your HomeCompoent.The directory structure of my project is below.

Here I have created components called home,addstudent and viewstudent.
The paths for those components are created as below.
const appRoutes:Routes = [
  {path:'',component:HomeComponent},
  {path:'add',component:AddstudentComponent},
  {path:'view',component:ViewstudentComponent},
]

Now in your app.component.html file add the router by using the below code.

<router-outlet></router-outlet>
And you have to link the navbar tabs with the components as below.

<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" [routerLink]="['/']">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/add']">Add Student</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [routerLink]="['/view']">View all</a>
  </li>
</ul>

Now run the program and see.For now this is the output generated in my project.