← Back to Articles         
Angular Route Parameters and Query Parameters

Angular Route Parameters and Query Parameters

Published on 30 Sep 2026     6 min read Angular
Routing

Angular Route Parameters and Query Parameters

These four questions are closely related, so we can understand them with one simple example.

/products/10?category=laptop

Here:

10                 → Route parameter
category=laptop    → Query parameter

1. How Do You Pass Route Parameters?

What is a Route Parameter?

A route parameter is a dynamic value that forms part of the URL path.

For example:

/products/10
/products/20
/products/100

Here, 10, 20, and 100 can represent different product IDs.

First, define a parameter in the route using :.

{
  path: 'products/:id',
  component: ProductDetails
}

Here:

:id

means id is a dynamic route parameter.

Full Simple Sample Program

app.routes.ts

import { Routes } from '@angular/router';
import { ProductList } from './product-list';
import { ProductDetails } from './product-details';

export const routes: Routes = [
  {
    path: 'products',
    component: ProductList
  },
  {
    path: 'products/:id',
    component: ProductDetails
  }
];

product-list.ts

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

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `
    <h2>Products</h2>

    <button (click)="viewProduct(10)">
      Product 10
    </button>

    <button (click)="viewProduct(20)">
      Product 20
    </button>
  `
})
export class ProductList {

  constructor(private router: Router) {
  }

  viewProduct(id: number): void {
    this.router.navigate(['/products', id]);
  }
}

product-details.ts

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

@Component({
  selector: 'app-product-details',
  standalone: true,
  template: `
    <h2>Product Details</h2>

    <p>Product ID: {{ productId }}</p>
  `
})
export class ProductDetails implements OnInit {

  productId: string | null = null;

  constructor(private route: ActivatedRoute) {
  }

  ngOnInit(): void {
    this.productId = this.route.snapshot.paramMap.get('id');
  }
}

Explanation

This code:

this.router.navigate(['/products', id]);

If:

id = 10;

Angular generates:

/products/10

The route:

path: 'products/:id'

matches it.

/products/10
          ↓
         :id
          ↓
          10

You can also pass route parameters using routerLink:

<a [routerLink]="['/products', 10]">
  Product 10
</a>

2. How Do You Read Route Parameters?

Use Angular's ActivatedRoute.

For:

/products/10

and:

{
  path: 'products/:id',
  component: ProductDetails
}

you can read id in two common ways.

Option 1 — snapshot

this.productId =
  this.route.snapshot.paramMap.get('id');

For:

/products/10

you get:

productId = "10"

Use snapshot when you only need the current value and don't expect the parameter to change while the same component instance remains active.

Option 2 — paramMap

this.route.paramMap.subscribe(params => {
  this.productId = params.get('id');
});

This is reactive.

For example:

/products/10
      ↓
/products/20

If Angular reuses the same component, paramMap can emit the new parameter.

10
 ↓
20

snapshot vs paramMap

snapshot paramMap
Reads current value Observes changes
Simple Reactive
No subscription Observable
Good for one-time reading Good when parameter may change

3. What Are Query Parameters?

What is it?

Query parameters are optional key-value pairs added after ? in a URL.

Example:

/products?category=laptop

Here:

category = laptop

is a query parameter.

Multiple query parameters are separated using &:

/products?category=laptop&page=2&sort=price

Here:

category = laptop
page     = 2
sort     = price

Query parameters are commonly used for:

  • Search
  • Filtering
  • Sorting
  • Pagination
  • Optional UI state

Full Simple Query Parameter Example

Passing Query Parameters

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

@Component({
  selector: 'app-product-search',
  standalone: true,
  template: `
    <button (click)="searchProducts()">
      Search Laptops
    </button>
  `
})
export class ProductSearch {

  constructor(private router: Router) {
  }

  searchProducts(): void {

    this.router.navigate(['/products'], {
      queryParams: {
        category: 'laptop',
        page: 2
      }
    });

  }
}

Angular generates:

/products?category=laptop&page=2

Reading Query Parameters

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

@Component({
  selector: 'app-products',
  standalone: true,
  template: `
    <h2>Products</h2>

    <p>Category: {{ category }}</p>
    <p>Page: {{ page }}</p>
  `
})
export class Products implements OnInit {

  category: string | null = null;
  page: string | null = null;

  constructor(private route: ActivatedRoute) {
  }

  ngOnInit(): void {

    this.route.queryParamMap.subscribe(params => {

      this.category = params.get('category');
      this.page = params.get('page');

    });

  }
}

For:

/products?category=laptop&page=2

we get:

category = "laptop"
page     = "2"

4. Route Parameters vs Query Parameters

This is the most important distinction.

Suppose we have:

/products/10?tab=reviews

Here:

/products/10
          ↓
     Route Parameter

?tab=reviews
     ↓
Query Parameter

Route Parameter

Defined as part of the route:

{
  path: 'products/:id',
  component: ProductDetails
}

URL:

/products/10

Read using:

this.route.paramMap.subscribe(params => {
  const id = params.get('id');
});

Query Parameter

Doesn't need to be declared as :something in the route path.

URL:

/products?category=laptop

Read using:

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

Route Parameters vs Query Parameters — Comparison

Route Parameters Query Parameters
Part of URL path Added after ?
Usually identify a resource Usually provide optional options
Defined using :parameter Not defined with : in route path
/products/10 /products?category=laptop
Read using paramMap Read using queryParamMap
Often required for a route match Usually optional
Good for IDs/resources Good for filtering/search/sorting/pagination

For example:

Product identity

Use a route parameter:

/products/10

because we're requesting a specific product.

Product filtering

Use query parameters:

/products?category=laptop&page=2

because we're still viewing the Products resource, but changing how the list is filtered/presented.

Using Both Together

A URL can contain both:

/products/10?tab=reviews

Route:

{
  path: 'products/:id',
  component: ProductDetails
}

Component:

ngOnInit(): void {

  this.route.paramMap.subscribe(params => {
    const id = params.get('id');

    console.log('Product ID:', id);
  });

  this.route.queryParamMap.subscribe(params => {
    const tab = params.get('tab');

    console.log('Tab:', tab);
  });

}

Result:

Product ID: 10
Tab: reviews

Conceptually:

/products/10?tab=reviews
          │      │
          │      └── Query Parameter
          │          tab = reviews
          │
          └── Route Parameter
              id = 10

How to Remember

Use this simple rule:

Route Parameter
      ↓
"Which resource?"

/products/10
          ↓
      Product 10


Query Parameter
      ↓
"How should I view/filter it?"

/products?category=laptop&page=2

Another common example:

/articles/100?mode=preview

Here:

100           → Which article?
mode=preview  → How should it be displayed?

Key Points

  • Route parameters are defined using ::
path: 'products/:id'
  • Pass a route parameter:
this.router.navigate(['/products', 10]);
  • Read a route parameter:
this.route.paramMap.subscribe(params => {
  const id = params.get('id');
});
  • Query parameters appear after ?:
/products?category=laptop
  • Pass query parameters:
this.router.navigate(['/products'], {
  queryParams: {
    category: 'laptop'
  }
});
  • Read query parameters:
this.route.queryParamMap.subscribe(params => {
  const category = params.get('category');
});
  • Both route and query parameter values obtained through ParamMap.get() are strings (or null), so convert when necessary:
const id = Number(params.get('id'));

Interview Questions and Answers

1. What is a route parameter?

A route parameter is a dynamic value embedded in the URL path.

path: 'products/:id'

Example:

/products/10

Here 10 is the id route parameter.

2. How do you pass a route parameter?

Using Router:

this.router.navigate(['/products', 10]);

Or using routerLink:

<a [routerLink]="['/products', 10]">
  Product
</a>

3. How do you read a route parameter?

Using ActivatedRoute:

this.route.paramMap.subscribe(params => {
  const id = params.get('id');
});

Or for a one-time read:

const id =
  this.route.snapshot.paramMap.get('id');

4. What is a query parameter?

A query parameter is an optional key-value pair added after ? in a URL.

/products?category=laptop&page=2

5. How do you pass query parameters?

this.router.navigate(['/products'], {
  queryParams: {
    category: 'laptop',
    page: 2
  }
});

6. How do you read query parameters?

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

7. What is the difference between route and query parameters?

Route parameters are part of the URL path and are generally used to identify a specific resource:

/products/10

Query parameters appear after ? and are generally used for optional filtering, sorting, searching, pagination, or display options:

/products?category=laptop&page=2

Interview-ready answer

Route parameters are dynamic values embedded in the URL path, such as /products/10, and are commonly used to identify a specific resource. Query parameters are optional key-value pairs after ?, such as /products?category=laptop&page=2, and are commonly used for filtering, sorting, searching, and pagination. In Angular, route parameters are read using paramMap, while query parameters are read using queryParamMap.

Keep Learning - More From This Category

← Back to Articles