How to Get Query Params in Angular: Simple Guide

In Angular, you get query parameters using the ActivatedRoute service by subscribing to its queryParams observable. This lets you react to changes in the URL's query string inside your component.

Syntax

Use Angular's ActivatedRoute to access query parameters. Inject it in your component's constructor, then subscribe to queryParams to get an object with all query parameters.

• ActivatedRoute: Service to access route info.
• queryParams: Observable that emits query parameter objects.
• subscribe(): Method to listen for changes.

typescript

constructor(private route: ActivatedRoute) {
  this.route.queryParams.subscribe(params => {
    console.log(params); // { key: 'value' }
  });
}

Output

{ key: 'value' }

Example

This example shows a component that reads query parameters from the URL and displays them on the page. It updates automatically if the query parameters change.

typescript

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

@Component({
  selector: 'app-query-param-example',
  template: `
    <h2>Query Parameters</h2>
    <pre>{{ queryParams | json }}</pre>
  `
})
export class QueryParamExampleComponent implements OnInit {
  queryParams: any = {};

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.queryParams = params;
    });
  }
}

Output

<h2>Query Parameters</h2>
<pre>{"page":"2","sort":"asc"}</pre>

Common Pitfalls

Not subscribing to queryParams: Query parameters are observable, so you must subscribe to get updates. Accessing queryParams directly without subscribing will not work.

Using snapshot only: route.snapshot.queryParams gives query params only once and does not update if URL changes. Use subscription for dynamic updates.

typescript

/* Wrong: Using snapshot only (does not update on changes) */
constructor(private route: ActivatedRoute) {
  const params = this.route.snapshot.queryParams;
  console.log(params); // Works only once
}

/* Right: Subscribe to queryParams for updates */
constructor(private route: ActivatedRoute) {
  this.route.queryParams.subscribe(params => {
    console.log(params); // Updates on every change
  });
}

Quick Reference

• Inject ActivatedRoute in your component.
• Subscribe to queryParams to get query parameters as an object.
• Use route.snapshot.queryParams only if you do not expect changes.
• Query parameters are always strings; convert if needed.

Key Takeaways

Use ActivatedRoute's queryParams observable to get query parameters reactively.

Always subscribe to queryParams to handle changes in the URL.

Avoid using snapshot.queryParams if query parameters can change after component loads.

Query parameters come as strings; convert them if you need other types.

Inject ActivatedRoute in the constructor to access route info.