28. Multiple Route Parameters

To pass multiple parameters in Angular routing, you can define routes with multiple dynamic segments.

1. Define Routes with Multiple Parameters in app-routing.module.ts

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { EmployeeComponent } from './employee/employee.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 
const routes: Routes = [
  { path: '', component: EmployeeComponent },
  { path: 'employees/:id/:name', component: EmployeeComponent },
  { path: '**', component: PageNotFoundComponent }  // Wildcard route
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

2. Access Multiple Parameters in Component

// employee.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
 
@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html'
})
export class EmployeeComponent implements OnInit {
  employeeId: string | null = null;
  employeeName: string | null = null;
 
  constructor(private route: ActivatedRoute) {}
 
  ngOnInit(): void {
    this.route.params.subscribe(params => {
      this.employeeId = params['id'];
      this.employeeName = params['name'];
    });
  }
}

3. Template for Displaying Data

<!-- employee.component.html -->
<h1>Employee Details</h1>
<p>Employee ID: {{ employeeId }}</p>
<p>Employee Name: {{ employeeName }}</p>

4. Navigating with Multiple Parameters

<!-- app.component.html -->
<a [routerLink]="['/employees', 123, 'John Doe']">Go to Employee 123 (John Doe)</a>
<router-outlet></router-outlet>

5. Wildcard Route (404 Page)

This catches any undefined routes and shows a 404 page:

// app-routing.module.ts
{ path: '**', component: PageNotFoundComponent }

Summary:

• Use :param1/:param2 to define multiple route parameters.
• Access them with ActivatedRoute in the component.
• Use routerLink to navigate to routes with multiple parameters.