Using ParamMap Observable For Handling Route In Angular

Introduction

In this article, we are going to learn how to use paramMap observable of ActivatedRoute and also learn how it is better to use that snapshot to read the parameter. So far we were using the snapshot to read the route parameter but using snapshot has several drawbacks. So, we will also see the difference of how the paramMap is better than the snapshot.

prerequisites:

• HTML, CSS and Js
• Basics of Typescript.
• Route Parameter in angular

Before we start please go through the creation of an application using a route parameter in angular.

Let us modify some files and observe what is the drawback of using the snapshot to read route parameter and using the component.

Open student-list.component.ts and add the below contents:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-student-list',
  templateUrl: './student-list.component.html',
  styleUrls: ['./student-list.component.css']
})
export class StudentListComponent implements OnInit {

  public student = {
    id: "",
    name: "",
    marks: ""
   };
  public students = [
    {"id" : 1001, "name" : "Irshad", "marks" : 90},
    {"id" : 1002, "name" : "Imran", "marks" : 80},
    {"id" : 1003, "name" : "Rahul", "marks" : 70},
    {"id" : 1004, "name" : "Ajay", "marks" : 85},
    {"id" : 1005, "name" : "Sunny", "marks" : 60}
    ];
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.student.id = this.route.snapshot.paramMap.get('id');
    this.student.name = this.route.snapshot.paramMap.get('name');
  }

}

Open student-list.component.html and add the below contents:

<h2>Student Details:</h2>
<div *ngFor="let stud of students">
    <a routerLink="/studentList/{{stud.id}}/{{stud.name}}"> Id : {{stud.id}}, Name : {{stud.name}} </a>
</div>
<br>
<p>Currently Selected :</p>

<p>Id: {{student.id}}</p>
<p>Name: {{student.name}}</p>

Open app-routing.module.ts and add the below values to the routes

const routes:Routes = [
    {path: '', redirectTo : '/studentList', pathMatch : 'full'},
    {path: 'studentList', component : StudentListComponent},
    {path: 'studentList/:id/:name', component : StudentListComponent},
    {path: 'studentMarks', component : StudentMarksComponent},
    {path: 'addStudent', component : StudentComponent},
    {path: "**", component : NotFoundComponent}
];

Run the application,

 

Click on any record (say ‘Irshad’) and see the URL and contents,

 

We have utilized this path to render the contents of the studentListComponent.

{path: 'studentList/:id/:name', component : StudentListComponent}

 

Now, again click on some other record (say ‘Sunny’) and see the URL and contents,

 

You can see the URL and the value has been changed but the rendered contents are still the same.

What we have observed so far is that the view is not getting updated. This is the drawback of using snapshot. The snapshot approach fails if we are navigating from one component back to the same component. The reason is that Angular needs to figure out whether it needs to initialize the new component or if it can reuse the same component. If we are navigating back to the same component. Angular reuses the same component. This is why our view is not getting updated.

The reason is the ngOnInit() method is not getting called and hence every time we are coming to the same component it simply reused the component and the value is not getting updated.

paramMap Observable

paramMap is the method of ActivatedRoute and it will return an observable and it will give data only if we subscribe to it. The argument in the subscribe method is an arrow function. The observable provides the parameter which we strongly typed to paramMap. paramMap is coming from Router package. We should have imported the Router package.

The paramMap provides us with the get method to retrieve the parameters.

Let us start with the code for better understanding.

Open student-list.component.ts and change ngOnInit() method.

ngOnInit() {
    this.route.paramMap.subscribe((params : ParamMap)=> {
      this.student.id=params.get('id');
      this.student.name=params.get('name');
    });

Now, anytime the parameter value changes and even the navigation is being done on the same component, paramMap observable will detect and read it.

Save the files and run the application.

 

Click on record (‘irshad’)

 

Click on any other record ( say ‘ajay’)

 

Great, we are getting the updated value even on navigation on the same component. You can see the URL value is getting changed and also making the view updated. Clicking on any record will give you the updated view.

So, this is how you can read the route parameter value using the param observable.