mediumFrontend

How do you read route parameters?

Q: How do you read route parameters?

**Core concept.** Inject ActivatedRoute and read parameters either **once** via the snapshot ( route.snapshot.paramMap.get('id') ) or **reactively** via the paramMap observable (for params that change while the component stays mounted). Query parameters come from queryParamMap . Modern Angular can also bind params straight to component @Input s. ActivatedRoute snapshot.para

415 views

Understand the problem

Explain ActivatedRoute.

routingparams

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Reactive param reading + refetch

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

@Component({ selector: 'app-user', standalone: true, template: '{{ id }}' })
export class UserComponent {
  private route = inject(ActivatedRoute);
  id = '';

  constructor() {
    // one-time:
    this.id = this.route.snapshot.paramMap.get('id') ?? '';

    // reactive (param changes in place) — refetch on each id:
    this.route.paramMap
      .pipe(switchMap(p => fetch('/users/' + p.get('id')).then(r => r.json())))
      .subscribe(user => console.log(user));
  }
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How does two-way binding work under the hood?

What is the difference between take(1) and first() operators in RxJS?