How to Get All Route Params/Data in Angular?

In Angular, managing route parameters and extracting data from routes is important for creating dynamic and responsive web applications. Route parameters allow you to pass information in URLs, and accessing this data enables your application to make decisions and render content dynamically. This article will guide you on how to get all route params/data in Angular

Prerequisites

• NodeJs
• Angular Js
• Typescript

Approach

• To access route parameters and data, we need to use Angular's 'ActivatedRoute' service. This service provides different observables. We can subscribe to required observables to get real-time updates of route parameters and data.
• We have created one Angular route file that contains the constant array of routing components along with path, component name and data. We have imported and registered it in the app module file. We will see the router path in the code later.
• We will create an app component and add navigation along with the routerLink in the component.
• We will create another component (product) on which we need to perform routing and get routing parameters and data using 'ActivatedRoute'.
• We will import the 'ActivatedRoute' and register it into the constructor. After registering, we will subscribe required observables which are 'paramMap' and 'data' to get information about the routing parameters and data. By subscribing to it we will get the information about the routing parameters and data.

We will see all the mentioned steps in the code base.

Steps to get Parameters and Data

Step 1: Install Angular CLI

• First you need to install Node.js on your system.
• Second, open your terminal or CMD(Command prompt) and run the below command

npm install -g @angular/cli

Step 2: Create a new Angular application

Run the below command to create a new Angular application

ng new angular-param-data --no-standalone

Step 3: Redirect to project directory

Change you working directory by entering project name in the below command

cd angular-param-data

Step 4: Execute an application

ng serve --open

The --open flag open an application directly in a browser. The application default run on http://localhost:4200.

The above mentioned steps create project with basic components and routes. It will generate app component along with the app routes. Now, we need create required Components and Module.

Step 5: Create product component

ng generate component product

The above command will create a component in the app directory. You can shorthand the command by writing ng g c.

The project directory structure will be display like the below image

Folder Structure

Dependencies

"dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/router": "^17.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  }

Example

//app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<header>
      <nav>
        <ul>
          <li>
            <a [routerLink]="['/']" routerLinkActive="active">Home</a>
          </li>
          <li>
            <a [routerLink]="['/product', 4]" routerLinkActive="active">Product</a>
          </li>
        </ul>
      </nav>
    </header>
    <router-outlet></router-outlet>`,
    styleUrl: './app.component.css',
})
export class AppComponent {
    title = 'angular-param-data';
}

//app.routes.ts

import { Routes } from '@angular/router';
import { ProductComponent } from './product/product.component';

export const routes: Routes = [
    {
        path: 'product/:id',
        component: ProductComponent,
        data: { info: 'Sample product page' },
    },
];

//app.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { routes } from './app.routes';
import { ProductComponent } from './product/product.component';

@NgModule({
    declarations: [AppComponent, ProductComponent],
    imports: [CommonModule, RouterModule.forRoot(routes), BrowserModule],
    bootstrap: [AppComponent],
})
export class AppModule { }

//product.component.ts

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

@Component({
    selector: 'app-product',
    template: ` <h1>Example Component</h1>
    <p>Current ID: {{ id }}</p>
    <p>Route Data: {{ data }}</p>`,
})
export class ProductComponent implements OnInit {
    id!: string | null;
    data!: string;

    constructor(private activatedRoute: ActivatedRoute) { }

    ngOnInit() {
        // For getting route parameter 'id'
        this.activatedRoute.paramMap.subscribe((params) => {
            this.id = params.get('id');
        });

        // For getting route data
        this.activatedRoute.data.subscribe((data) => {
            this.data = data['info'];
        });
    }
}

Output

The above example shows how to get route parameters and data in Angular.