Route Parameters and ActivatedRoute

Many routes are dynamic — they include a variable segment like a movie ID or a search query. Angular provides ActivatedRoute to read these values inside a component.

Route parameters: the :id pattern

When you define a route like { path: 'movies/:id', component: MovieDetail }, the :id segment is a route parameter — a placeholder for a dynamic value.

When the user navigates to /movies/550, Angular matches this route and makes 550 available as the id parameter.

Reading route parameters

Inject ActivatedRoute and read the snapshot.paramMap:

movie-detail.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MovieService } from '../../services/movie.service';
import { MovieDetail as MovieDetailModel } from '../../models/movie.model';

@Component({
  selector: 'app-movie-detail',
  templateUrl: './movie-detail.html',
  styleUrl: './movie-detail.css'
})
export class MovieDetail implements OnInit {
  movie?: MovieDetailModel;

  constructor(
    private route: ActivatedRoute,
    private movieService: MovieService
  ) {}

  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');
    if (id) {
      this.movieService.getDetail(+id).subscribe(movie => {
        this.movie = movie;
      });
    }
  }
}

snapshot.paramMap.get('id') returns the current value of the id parameter as a string, or null if it does not exist. The +id converts it to a number for the API call.

Query parameters: ?key=value

Query parameters appear after the ? in a URL: /search?q=inception. They are different from route parameters — they are not part of the route definition.

Read them with queryParamMap:

search-results.ts

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

@Component({ /* ... */ })
export class SearchResults implements OnInit {
  results: Movie[] = [];
  query = '';

  constructor(
    private route: ActivatedRoute,
    private movieService: MovieService
  ) {}

  ngOnInit(): void {
    this.route.queryParamMap.subscribe(params => {
      const q = params.get('q') ?? '';
      this.query = q;
      if (q) {
        this.movieService.search(q).subscribe(results => {
          this.results = results;
        });
      }
    });
  }
}

Note: queryParamMap is an Observable (not queryParamMap.get() directly) because query params can change while the component is active — for example, if the user submits a new search. Subscribing to the observable ensures the component reacts to changes.

Snapshot vs. Observable

snapshot gives you the parameter value at the moment the component initialized. Use it when the route parameter will not change while the component is on screen — which is true for most cases.

If a route parameter can change while the same component instance is displayed (navigating from /movies/1 to /movies/2 while MovieDetail stays mounted), use the Observable version:

this.route.paramMap.subscribe(params => {
  const id = params.get('id');
  // reload data for the new id
});

In CinemaVault, snapshot is sufficient for movie detail — navigating to a different movie creates a fresh component instance.

Navigating with query parameters

To navigate to a route with query parameters programmatically or via RouterLink:

<!-- template -->
<a [routerLink]="['/search']" [queryParams]="{ q: searchQuery }">Search</a>

// in a component
this.router.navigate(['/search'], { queryParams: { q: this.query } });

Exercise

1. Create a pages/detail component.
2. Define a route: { path: 'items/:id', component: Detail }.
3. In Detail, inject ActivatedRoute and log this.route.snapshot.paramMap.get('id') in ngOnInit.
4. Add a link from Home: <a [routerLink]="['/items', 42]">Item 42</a>.
5. Click the link and confirm '42' logs in the console.
6. Create a pages/search component that reads ?q= from queryParamMap and displays the query.

Recap

• ActivatedRoute.snapshot.paramMap.get('name') reads a route parameter defined with :name.
• Route parameters are part of the path: /movies/:id.
• ActivatedRoute.queryParamMap (Observable) reads query string parameters like ?q=value.
• Use snapshot for parameters that do not change while the component is active; subscribe to the Observable if they can.
• Pass query params via [queryParams] in RouterLink or the second argument of router.navigate().