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

Mongoose schema field from list of strings (enum)

Mongoose schema field from list of strings (enum) code snippet Continue reading

Set value of input field in angular template

Published on December 14, 2022

How to use jest test.each function

Published on December 14, 2022