Get URL Query Parameters in Angular 5 with ActivatedRoute

You will learn how Angular represents query parameters through ActivatedRoute, when to use a one-time snapshot, and when to subscribe so your component responds to URL changes. You will also see how to create URLs with query parameters through Angular's Router.

Query parameters are the optional key=value values after ? in a URL:

/app?param1=hallo&param2=123

They are commonly used for data that describes a view without changing its route path: search text, page number, sort order, filters, and tracking values.

In Angular, query parameters belong to the router state. Inject ActivatedRoute into a routed component and read either:

• route.snapshot.queryParamMap when you only need the value at component creation.
• route.queryParamMap when the value may change while Angular keeps the same component instance alive.

Unlike a path parameter such as /products/42, query parameters are not tied to one route segment. They are available from the active route, including a root-level AppComponent in a router-based application.

Use Angular's router APIs rather than manually parsing window.location.search. The router understands Angular navigation, works with route changes, and makes components easier to test.

Think of a route as the address of a building:

• The path is the street address: /products/42.
• Query parameters are notes attached to the address: ?tab=reviews&sort=newest.

ActivatedRoute is Angular's delivery slip for the current address. A snapshot is a photograph of the slip at one moment. An observable is a notification service that gives you a new slip whenever the query parameters change.

Inject ActivatedRoute and use queryParamMap.

Read once with a snapshot

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

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    const param1 = this.route.snapshot.queryParamMap.get('param1');
    const param2 = this.route.snapshot.queryParamMap.();

    .(param1); 
    .(param2); 
  }
}

Consider this URL:

/results?q=angular&page=2

And this component:

ngOnInit(): void {
  this.route.queryParamMap.subscribe(params => {
    const query = params.get('q') || '';
    const pageText = params.get('page') || '1';
    const page = Number(pageText);

    console.log(query, page);
  });
}

Execution proceeds as follows:

1. Angular creates ResultsComponent for the /results route.
2. Angular injects the current ActivatedRoute into the constructor.
3. ngOnInit subscribes to queryParamMap.
4. The router emits the current parameter map.
5. params.get('q') returns .

• Search pages: /search?q=angular supplies the text used to load results.
• Pagination: /orders?page=3&pageSize=25 determines which records an API request should fetch.
• Filtering: /products?category=books&inStock=true represents selected filters.
• Sorting: /products?sort=price&direction=asc preserves the user's ordering choice.
• Tabs and display state: /account?tab=security opens a particular section.
• Shareable views: A user can copy a filtered report URL and another user sees the same view.

Do not treat query parameters as trusted input. Validate values before using them in business logic or sending them to an API.

Production components typically normalize and validate query parameters before using them.

Use defaults and validate numbers

this.route.queryParamMap.subscribe(params => {
  const requestedPage = Number(params.get('page') || '1');

  this.page = Number.isInteger(requestedPage) && requestedPage > 0
    ? requestedPage
    : 1;
});

This prevents values such as ?page=-2 or ?page=hello from breaking pagination.

Load data when parameters change

this.route.queryParamMap.subscribe(params => {
  const search = params.get('q') || '';
  this.productService.search(search).( {
    . = products;
  });
});

Expecting a number instead of a string

This URL parameter is text:

const page = this.route.snapshot.queryParamMap.get('page');
// page is "2", not 2

Convert and validate it:

const page = Number(this.route.snapshot.queryParamMap.get('page') || '1');

Forgetting that a parameter can be missing

Broken code:

const term = this.route.snapshot.queryParamMap.get('q');
console.log(term.toUpperCase());

get('q') can return null. Provide a fallback:

// Inject the active route
constructor(private route: ActivatedRoute) {}

// Read once
const value = this.route.snapshot.queryParamMap.get('key');

// React to changes
this.route.queryParamMap.subscribe(params => {
  const value = params.get('key');
});

// Check for a value
const exists = this.route.snapshot.queryParamMap.has('key');

// Read repeated values
const tags = this.route.snapshot.queryParamMap.getAll('tag');

// Create a URL with query parameters
this.router.navigate([], {
  : { : , :  }
});


..([], {
  : { :  },
  : 
});

How do I get query parameters in Angular 5?

Inject ActivatedRoute, then use this.route.snapshot.queryParamMap.get('name') for an initial value or subscribe to this.route.queryParamMap for updates.

Why does get('page') return a string?

All URL query parameter values are text. Convert the value with Number() or another validation function when you need a number.

What happens if the query parameter does not exist?

queryParamMap.get('name') returns null. Use a default, such as params.get('name') || ''.

Should I use queryParams or queryParamMap?

Both work in Angular 5. queryParamMap is often easier to read because it has explicit methods including get, has, and getAll.

Can AppComponent read query parameters?

Yes. Injecting ActivatedRoute into can read query parameters. For route-specific screen logic, it is usually cleaner to read them in the routed page component.

• Angular Router — defines routes and performs navigation in Angular applications.
• ActivatedRoute — provides information about the currently active route.
• Route parameters (paramMap) — reads values embedded in a path, such as /users/42.
• Router navigation — creates URLs programmatically with Router.navigate.
• RxJS Observables — power queryParamMap updates when route state changes.
• Form validation — helps validate query parameter values before using them.
• URL encoding — explains how special characters are represented safely in query strings.