Overview Of Route Parameters In Angular

Introduction

In this article, we are going to send data from one template to another through route parameters.

Prerequisites

HTML, CSS, and JS
Basics of TypeScript.
Route in Angular

Before we start, please go through the creation of an application using the route in Angular.

Create a new component.

>ng g c student
>ng g c student-list

Note: we are going to use the same application with two newly-added components. We will try to add a student detail (only name) and pass that to the Added details component through route and routing parameters.

Open student.component.html and add the below code.

<h3>Add Student</h3>
<label>Enter name:</label>
<input #name type="text">
<button (click)="AddStudent(name.value)">Add</button>

Open student.component.ts and add the below content.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-student',
templateUrl: './student.component.html',
styleUrls: ['./student.component.css']
})
export class StudentComponent implements OnInit {
AddStudent(obj){
this.router.navigate(['/studentDetails', obj]);
}
constructor(private router : Router) { }
ngOnInit() {
}
}

Open student-details.component.html and add the below lines.

<h2>Added Student Details</h2>
<p>Name : <b>{{studentName}}</b> --- added successfully.</p>

Open student-details.component.ts and add the following code.

import { Component, OnInit } from '@angular/core';
import { StudentService } from '../student.service';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-student-details',
templateUrl: './student-details.component.html',
styleUrls: ['./student-details.component.css']
})
export class StudentDetailsComponent implements OnInit {
public studentName = "";
constructor(private route : ActivatedRoute) {
}
ngOnInit() {
let name = this.route.snapshot.paramMap.get('name');
this.studentName = name;
}
}

Open app.component.html and add the below HTML.

<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<ul>
<li>
<a routerLink="/addStudent">Add Student</a>
</li>
<li>
<a routerLink="/studentDetails">Student Details</a>
</li>
<li>
<a routerLink="/studentMarks">Student Marks</a>
</li>
</ul>
<router-outlet></router-outlet>

Open app-routing.module.ts and add these lines.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StudentDetailsComponent } from './student-details/student-details.component';
import { StudentMarksComponent } from './student-marks/student-marks.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { StudentComponent } from './student/student.component';
import { StudentListComponent } from './student-list/student-list.component';
const routes:Routes = [
{path: '', redirectTo : '/studentDetails', pathMatch : 'full'},
{path: 'studentList', component : StudentListComponent},
{path: 'studentDetails/:name', component : StudentDetailsComponent},
{path: 'studentMarks', component : StudentMarksComponent},
{path: 'addStudent', component : StudentComponent},
{path: "**", component : NotFoundComponent}
];
@NgModule({
imports : [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule{}

Run the application.

Click on the "Add Student" link.

Enter the name as “Mohammad Irshad” and click the “Add” button.

You can see that the data you send from the "Add Student" View is coming to the "Student Details" View through routing parameter.

You can check the URL. It is having the value we send and that is what we defined in the route list.

What have we done?

Added route with a placeholder for the route parameter.
1. {path: 'studentDetails/:name', component : StudentDetailsComponent},

To pass the parameter while routing, we made use of router service. It has navigated the method through which we can pass the link and parameters array.

See student.component.ts
1. AddStudent(obj){
2. this.router.navigate(['/studentDetails', obj]);
3. }

To read the router parameter, we made use of the Activated route. We did use the snapshot of the current route with param API to get and read the parameter. Then, we simply bound that value to the View using interpolation.

See student-details.component.ts

let name = this.route.snapshot.paramMap.get('name');
this.studentName = name;

So, this is how we can pass parameter while routing in Angular.

Now, let us pass multiple parameters in routing. Open app-routing.module.ts and add the below contents in routes.

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}
];

Open student.component.html and add the below code.

<h3>Add Student</h3>
<label>Enter Id:</label>
<input type="text" [(ngModel)]="student.id">
<label>Enter name:</label>
<input type="text" [(ngModel)]="student.name">
<label>Enter Marks:</label>
<input type="text" [(ngModel)]="student.marks">
<button (click)="AddStudent(student)">Add</button>

Open student.component.ts and add the below code.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-student',
templateUrl: './student.component.html',
styleUrls: ['./student.component.css']
})
export class StudentComponent implements OnInit {
public student : any = {
id: "", name : "", marks : ""
};
AddStudent(obj){
this.router.navigate(['/studentDetails', obj.id, obj.name, obj.marks]);
}
constructor(private router : Router) { }
ngOnInit() {
}
}

Open student-details.component.ts and update the ngOnInit() method.

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-details.component.html and add the below code.

<h2>Added Student Details</h2>
<p>Id : <b>{{student.id}}</b></p>
<p>Name : <b>{{student.name}}</b></p>
<p>Marks : <b>{{student.marks}}</b></p>
<p> --- added successfully.</p>

Run the application.

Enter details and click on the Add button.