Angular router navigation with query parameters example

Project: codever

Use the queryParams extra parameter of the router navigate method:

  constructor(private router: Router,
              private httpClient: HttpClient) {
    this.publicSnippetsApiBaseUrl = environment.API_URL + '/public/snippets';

  getPublicSnippetById(snippetId: string): Observable<Codelet> {
    return this.httpClient
        catchError(() => {
              queryParams: {snippetId: snippetId}
          return throwError('Error 404');

On the receiving side you can extract the parameter from the ActivatedRoute’s queryParamMap property

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

  template: '  <div id="about-content" class="jumbotron"><h5>Snippet with the id "" was not found - the submitter might have deleted it</h5> </div>'
export class SnippetNotFoundComponent {
  snippetId: string;

  constructor(private route: ActivatedRoute) {
    this.snippetId = this.route.snapshot.queryParamMap.get('snippetId');

Reference -

Shared with from Codever. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Codever is open source on Github ⭐🙏

Subscribe to our newsletter for more code resources and news

Adrian Matei (aka adixchen)

Adrian Matei (aka adixchen)
Life force expressing itself as a coding capable human being

routerLink with query params in Angular html template

routerLink with query params in Angular html template code snippet Continue reading