Route Parameters and Query Params

Route parameters are dynamic segments in the URL. Angular provides multiple ways to read them.

Route Definition with Parameters

export const routes: Routes = [
  { path: 'products/:id', component: ProductDetailComponent },
  { path: 'users/:userId/posts/:postId', component: PostComponent },
];

Reading Params with ActivatedRoute

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

@Component({
  selector: 'app-product-detail',
  template: `<p>Product ID: {{ productId }}</p>`,
})
export class ProductDetailComponent {
  private route = inject(ActivatedRoute);
  productId = '';

  constructor() {
    // Snapshot — one-time read (does not react to changes)
    this.productId = this.route.snapshot.paramMap.get('id') || '';
  }
}

Observable-Based Param Reading

@Component({
  selector: 'app-product-detail',
  template: `<p>Product ID: {{ productId }}</p>`,
})
export class ProductDetailComponent implements OnInit {
  private route = inject(ActivatedRoute);
  productId = '';

  ngOnInit(): void {
    // Observable — reacts to param changes
    this.route.paramMap.subscribe(params => {
      this.productId = params.get('id') || '';
    });
  }
}

Snapshot vs Observable

Query Parameters

// URL: /products?category=electronics&page=2

this.route.queryParamMap.subscribe(params => {
  const category = params.get('category'); // 'electronics'
  const page = params.get('page');         // '2'
});

Fragment

// URL: /products#reviews

this.route.fragment.subscribe(fragment => {
  console.log('Fragment:', fragment); // 'reviews'
});

Routes can have multiple parameters and static data.

Multiple Parameters

// Route definition
{ path: 'users/:userId/posts/:postId', component: PostComponent }

// URL: /users/42/posts/7

this.route.paramMap.subscribe(params => {
  const userId = params.get('userId');   // '42'
  const postId = params.get('postId');   // '7'
});

Route Data Property

Static data can be attached to routes:

export const routes: Routes = [
  {
    path: 'about',
    component: AboutComponent,
    data: { title: 'About Us', showHeader: true },
  },
];

this.route.data.subscribe(data => {
  console.log(data['title']);      // 'About Us'
  console.log(data['showHeader']); // true
});

ParamMap API

const paramMap = this.route.snapshot.paramMap;

paramMap.get('id');       // string | null
paramMap.getAll('id');    // string[]
paramMap.has('id');       // boolean
paramMap.keys;           // string[]

Complete Example

@Component({
  selector: 'app-product-detail',
  template: `
    <h1>Product {{ productId }}</h1>
    <p>Category: {{ category }}</p>
    <p>Page: {{ page }}</p>
  `,
})
export class ProductDetailComponent implements OnInit {
  private route = inject(ActivatedRoute);
  productId = '';
  category = '';
  page = '1';

  ngOnInit(): void {
    // Route params
    this.route.paramMap.subscribe(params => {
      this.productId = params.get('id') || '';
    });

    // Query params
    this.route.queryParamMap.subscribe(params => {
      this.category = params.get('category') || 'all';
      this.page = params.get('page') || '1';
    });
  }
}