Overview Of Optional Route Parameters In Angular

Introduction

In this article, we are going to learn the optional route parameters in Angular. Sometimes it may be a requirement that we want the component view to be rendered on the basis of some values coming from the route parameter or we just want to render the component with some additional functionality with the help of some values coming from parameters.

Prerequisites

• HTML, CSS and JS
• Basics of TypeScript.
• Route Parameter in Angular with paramMap

Before we start please go through the creation of applications using a route parameter in Angular with paramMap.

Let us try achieving the use of optional route parameters.

We are going to make some small changes to the application. We will have a list of student records, and clicking on any record will display the details of that selected student and on the details page, we will have back button, clicking on which will send you back to the student-list page view with the selected record in some different style.

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

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, ParamMap } 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');
    this.student.marks = this.route.snapshot.paramMap.get('marks');
  }
}

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

<h2>Student Details:</h2>
<div *ngFor="let stud of students">
    <a routerLink="/studentDetails/{{stud.id}}/{{stud.name}}/{{stud.marks}}"> Id : {{stud.id}}, Name : {{stud.name}} </a>
</div>
<br>
<div *ngIf="student.id">
    your current selection : Id - {{student.id}}, Name - {{student.name}}, Marks - {{student.marks}}
</div>

Open student-details.component.ts and add the below contents,

import { Component, OnInit } from '@angular/core';
import { StudentService } from '../student.service';
import { ActivatedRoute, Router } from '@angular/router';

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

  public student = {
     id: "",
     name: "",
     marks: ""
    };
  constructor(private route : ActivatedRoute, private router : Router) {
  }

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

  gotoStudentList(){
    this.router.navigate(['/studentList', this.student])
  }
}

Open student-details.component.html and add the below contents,

<h2>Selected Student Details</h2>
<p>Id : <b>{{student.id}}</b></p>
<p>Name : <b>{{student.name}}</b></p>
<p>Marks : <b>{{student.marks}}</b></p>

<div>
    <button (click)="gotoStudentList()">Back</button>
</div>

Open app-routing.module.ts and change the route values as below,

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

Run the application,

 

Url: http://localhost:4200/studentList with no parameters.

Click on any record.

 

Click on the back button,

 

Again we are redirecting the same url http://localhost:4200/studentList but with additional parameters http://localhost:4200/studentList;id=1001;name=Irshad;marks=90. These parameters are optional because its existence does not affect the view but they can be used to apply the logic to the view.

Also you can see the two routes,

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

The studentList path does not require any parameter to render but still we are accessing it through parameters http://localhost:4200/studentList;id=1001;name=Irshad;marks=90. This is because we are using optional parameters in the form of key value pairs.

this.router.navigate(['/studentList', this.student])

or

this.router.navigate(['/studentList', {id : this.student.id, name : this.student.name, marks : this.student.marks}])

So, this is all about optional route parameters that you can use according to the logic applicable on your view.