[Angular] Preserve the current route’s query parameters when navigating with the Angular Router

When we redirect to a different route from within our component's code using the Router.navigate or from within a component template via a [routerLink] directive, we may want to preserve the current route’s query parameters and carry them on to the next route. In this lesson we'll learn about the router's preserveQueryParams option as well as the [queryParams] directive on the [routerLink].

If you using template syntax to do the routing:

import { Component, OnInit } from '@angular/core';
import { PeopleService } from './people.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-people-list',
  template: `
    <h3>People</h3>
    <ul>
      <li *ngFor="let person of people | async">
        <a [routerLink]="[person.id]" [queryParams]="activatedRoute.queryParams | async">{{ person.name }}</a>
      </li>
    </ul>
  `,
  styles: []
})
export class PeopleListComponent implements OnInit {
  people;

  constructor(
    private peopleService: PeopleService,
    public activatedRoute: ActivatedRoute
  ) {}

  ngOnInit() {
    this.people = this.peopleService.getAll();
  }
}

You can directly bind queryParams form the activeRoute.

If you doing routing from the component:

onSave(personName) {
    this.person.name = personName;
    this.peopleService.save(this.person).subscribe(() => {
      // redirect back people list
      this.router.navigate(['../'], {
        relativeTo: this.activatedRoute,
        preserveQueryParams: true
      });
    });
  }