Routing And Navigation With Angular 5

Angular routing helps navigation across the application from one view to another view. It also allows us to maintain the state, implement modules, and load the modules based on the role of the user. Let’s see in this article how we configure the routing and some basic concepts with it. For this let’s add 3 component in the application Namely Home, Employee and Department our goal is to load the following pages below is the routing table for the configuration,

Path	URL	Component
/	Localhost:4200	Employee
/Employee	Localhost:200/Employee	Employee
/Department	Localhost:4200/Department	Department

Basic Setup

In this let’s see the basic import that we need to do so as to make the routing work in our application. To use the routing module we need to import some package in the application module which can be like this

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

Route Configuration

Now next step is to map the URL to a component that can be shown on the page which is done by using the Route Configuration which is nothing but the array of the path how we can do this. Let's add new class file and name it as ApplicationRoutes.ts. The code snippet for the same is like below.

import {Routes} from '@angular/router';
import { EmployeeComponent } from './employee/employee.component';
import { DepartmentComponent } from './department/department.component';

export const routes: Routes = [
    { path: '', component: EmployeeComponent },
    { Path: 'employee', component: EmployeeComponent },
    {Path: 'Department', component: DepartmentComponent }
    ]

There are two main part which are,

1. path: It describe the URL this route handle
2. component: This is the name of the component we want to display when URL in the Browser matches the Route
3. Routes: This is the typescript array of the Routes

Next thing what we need to do is we need to import these routs in the application we can do this by adding lines RouterModule.forRoutes(routes) into the imports section of the Application Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponentComponent } from './home-component/home-component.component';
import { EmployeeComponent } from './employee/employee.component';
import { DepartmentComponent } from './department/department.component';

import {routes} from './ApplicationRoutes'

@NgModule({
  declarations: [
    AppComponent,
    HomeComponentComponent,
    EmployeeComponent,
    DepartmentComponent
  ],
  imports: [
    BrowserModule
   ,
    RouterModule.forRoot(routes, {useHash: true})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {


}

Another thing that we need to consider is the <router-outlet></router-outlet>

Directive that we have now question is what it does?

Remember we have mapped the routes to the link in our application but where we want to display them? Here It tells angular where it should insert the component specified in the route table so in our case it will be app.component and code snippet for that will be like below. 

<div>
 </div>
<table border="1">
    <tr>
      <td>
         <nav class="navbar navbar-light bg-faded">

  <ul class="nav navbar-nav">
      <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
    <li class="nav-item active">
      <a class="nav-link" [routerLink]="['employee']">Employee</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLink]="['Department']">Departement</a>
    </li>
  </ul>
</nav>

      </td>
      <td>
        <router-outlet></router-outlet>
      </td>
    </tr>
  </table>

When we run and see the application we can see the output,



Whenever we click on the link at the left hand side then corresponding component will be loaded .

Next section that we need to understand is the Redirect and the situation where our URL doesn’t map to any of the component in these situations we generally redirect them to one of the components.

For this, we need to just change in the Route configuration like below,

import {Routes} from '@angular/router';
import { EmployeeComponent } from './employee/employee.component';
import { DepartmentComponent } from './department/department.component';
import { HomeComponentComponent } from './home-component/home-component.component';

export const routes: Routes = [
    { path: '',redirectTo:'Home',pathMatch:'full' },
    { path: 'Home',component:HomeComponentComponent },
    { path: 'employee', component: EmployeeComponent },
    { path: 'Department', component: DepartmentComponent },
     { path: '**', component: HomeComponentComponent }

   ]

redirect To

This property specifies the path where we want to navigate when a user enters this URL.

** : This specifies if no match happens where to redirect in our case we are redirecting to the Home component

This is about basic routing with the Angular. Let's see the Parametrized routes and Route guards in next lectures.

References

1. https\\Angular.io
2. https\\rangle.io