Query Parameters in Angular

Query params are those extra values in the URL after ?.

Example:
/search?q=angular&page=2

Read query params

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

export class SearchComponent {
  query = '';
  page = 1;

  constructor(private route: ActivatedRoute) {
    this.route.queryParamMap.subscribe(params => {
      this.query = params.get('q') ?? '';
      this.page = Number(params.get('page') ?? '1');
    });
  }
}

Set query params from a link

<a [routerLink]="['/search']" [queryParams]="{ q: 'angular', page: 1 }">
  Search Angular
</a>

Next: Route guards, protecting pages like /dashboard.