Navigation And Parameterized Routes In Angular 5

We have seen the basics of the Routing in Angular in the last article. Now let’s see how Angular offers navigation and how we can use the parameterized routes in Angular. Let’s try to understand how to navigate programmatically from the component and from the template.

There are 3 ways by which we can navigate among the component

Using hard coded URL

In this we can simply hard code the URL in the href of the anchor tag and it will work smoothly Code snippet for the same can be like this

<nav class="navbar navbar-light bg-faded">
    <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li>
    <li class="nav-item active"> <a class="nav-link" href="#/employee">Employee</a> </li>
    <li class="nav-item"> <a class="nav-link" href="#/Department">Departement</a> </li>
</nav>
<router-outlet></router-outlet>

This is the simplest of all but when we adopt the different route strategy then it won’t work if we have this strategy then the whole page will be loaded again if we see this.

Using Router in component

We can programmatically navigate to the template using the router by using the router service in our component. For this let’s check the code snippet for the template and the app component,

<li class="nav-item active"> <a class="nav-link" href="/#">Home</a> </li>
<li class="nav-item active"> <a class="nav-link" (click)='goEmployee()'>Employee</a> </li>
<li class="nav-item"> <a class="nav-link" (click)='goDepartment()'>Departement</a> </li>
  import {
    Component
} from '@angular/core';
import {
    Router
} from '@angular/router'
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
}) export class AppComponent {
    title = 'app';
    constructor(private routeconfig: Router) {}
    goEmployee() {
        this.routeconfig.navigate(['employee']);
    }
    goDepartment() {
        this.routeconfig.navigate(['Department']);
    }
}

Code snippet can be explained like below,

1. We are importing the Router service in the header component where we want to add the navigation Logic
2. Injecting the Routing service in the Constructor of the component
3. We have added 3 methods like goEmployee(),goDepartment() which will do the navigation for us
4. Final step is to modify the template and adding the click handlers in template on click of the anchor tag corresponding method in the component will be called.

Using routerlink directive

Next thing is to navigate between the template using the routerlink directive we can navigate between the component what is routerlink ? routerlink is the selector for the Routerlink Directive

Which turns the click of the user into the navigation. We can use them directly in our template like below.

<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>

In above code if u notice we have used the routerlink and [routerlink ] obviously what is difference between them ? so when we use the router link with [ ] we can bind this property from the component and assign it to the routerlink. Second case being bit hardcoded and strongly attached to the routerlink as we are assigning the hardcoded string to the routerlink in the template itself.

Parametrized Routes

Suppose we have a case where we want to display the employee details depending on the Id which is passed in the URL this is the simple way of managing the state between the component we can pass these variables using Query string in the normal dot net application

We can use the parametrized routes to achieve this using angular.

Let’s see step by step how we can achieve this first of all add the component named employee details which should get loaded when the URL employee/id is entered in browser.

1. Route configuration
   

   To configure the routes in the application we need to make changes in the application routes

   Let’s add the configuration like below at the application route.

   { path: 'employee/:empid', component: EmployeeDetailsComponent }

   Here the path has the variable empid as convention it is a variable as it starts with the [ : ] it can have any number of variables in the path just they need to start with the

2. Activated Routes
   Now we need to pass this empid in the component how we can pass this value here the activated routes comes in picture

   We first import the activated route service in the component and then inject it into the constructor of the component. It returns the Observable which we can subscribe in the component like below.

   import {
       Component,
       OnInit
   } from '@angular/core';
   import {
       ActivatedRoute
   } from "@angular/router";
   @Component({
       selector: 'app-employee-details',
       templateUrl: './employee-details.component.html',
       styleUrls: ['./employee-details.component.css']
   })
   export class EmployeeDetailsComponent implements OnInit {
       empid: string;
       constructor(private activeroute: ActivatedRoute) {
           this.activeroute.params.subscribe(params => this.empid = params.empid);
       }
       ngOnInit() {}
   }

   In above code snippet, what we have done is we have imported the activated Route in the component and then we have subscribed to the observable in the component constructor and assigned the value of the parameter empid to the local empid.

Code snippet for the template can be like below where we are just showing the value of this empid using interpolation

<h1>Employee details component and ID is {{empid}}</h1>

This was all about how we can do the navigation between the components and how we can use the parameter in the application . In next article, we will see the Routes guards and the Routing strategy that we can adopt while implementing the Routing in angular application.

References

1. https:\\Angular.io\
2. https:\\Rangle.io\
3. https://codecraft.tv/courses/angular