Query Params & Fragment

queryParamMap exposes the ?key=value pairs and fragment exposes the #anchor — both available from ActivatedRoute.

4 min read Level 2/5 #angular#router#query

What you'll learn

Read queryParamMap and fragment
Navigate with queryParams
Preserve or merge with queryParamsHandling

Path params identify a resource; query params filter or paginate it; the fragment is an anchor inside the page. All three are exposed through ActivatedRoute.

Read query params

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

@Component({ selector: 'app-list', standalone: true, template: `Page {{ page }}` })
export class ListComponent {
  private route = inject(ActivatedRoute);
  page = Number(this.route.snapshot.queryParamMap.get('page') ?? 1);
}

For reactive reads, subscribe to route.queryParamMap or wrap it with toSignal.

Navigate with query params

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

private router = inject(Router);

next() {
  this.router.navigate(['/list'], { queryParams: { page: this.page + 1 } });
}

By default this replaces the query string. Use queryParamsHandling to keep existing ones.

Merge vs preserve

// keep existing params, override page
this.router.navigate(['/list'], {
  queryParams: { page: 2 },
  queryParamsHandling: 'merge',
});

// keep all current query params, change only the path
this.router.navigate(['/details'], {
  queryParamsHandling: 'preserve',
});

Fragments

<a routerLink="/docs" fragment="install">Install section</a>

Read it with route.snapshot.fragment. The router will not scroll automatically — set withInMemoryScrolling({ anchorScrolling: 'enabled' }) on provideRouter.

CanActivate & CanDeactivate →