Route Parameters

Most real routes aren't static — a product page, a user profile, or an article each need their own URL built from an id or a slug. Angular's router supports this with route parameters: named, dynamic segments in a path.

Declaring a parameterized route

// app.routes.ts
import { Routes } from '@angular/router';
import { ArticleDetailComponent } from './article-detail/article-detail.component';

export const routes: Routes = [
  { path: 'articles/:slug', component: ArticleDetailComponent },
];

The :slug segment matches anything in that position of the URL — /articles/what-is-angular and /articles/routing-basics both match this one route, with slug bound to what-is-angular or routing-basics respectively.

Reading the parameter with an input

import { Component, Input, OnInit, inject } from '@angular/core';
import { ArticleService } from '../article.service';

@Component({
  selector: 'app-article-detail',
  template: `<h1>{{ article?.title }}</h1>`,
})
export class ArticleDetailComponent implements OnInit {
  @Input() slug!: string;
  private articleService = inject(ArticleService);
  article?: { title: string; body: string };

  ngOnInit(): void {
    this.article = this.articleService.getBySlug(this.slug);
  }
}

// app.config.ts — enabling this binding
import { provideRouter, withComponentInputBinding } from '@angular/router';

providers: [provideRouter(routes, withComponentInputBinding())]

With withComponentInputBinding() enabled, Angular automatically binds a route parameter to a component @Input of the same name — slug here arrives just like any other input, no manual lookup required. This is the modern, preferred approach because it keeps the component decoupled from the router itself; the component simply declares "I need a slug," and doesn't need to know it came from a URL.

Reading the parameter manually with ActivatedRoute

Before component input binding existed — and still useful for more advanced cases, like reacting to a parameter changing without the whole component being recreated — ActivatedRoute exposes the current route's parameters as an observable:

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

@Component({ selector: 'app-article-detail', template: `<h1>{{ title }}</h1>` })
export class ArticleDetailComponent implements OnInit {
  private route = inject(ActivatedRoute);
  title = '';

  ngOnInit(): void {
    this.route.paramMap.subscribe((params) => {
      this.title = params.get('slug') ?? '';
    });
  }
}

Subscribing to paramMap (rather than reading it once) matters because Angular reuses a component instance when only its route parameters change — navigating from /articles/a to /articles/b doesn't necessarily destroy and recreate ArticleDetailComponent, so a one-time read in ngOnInit would miss the update entirely.

Query parameters

Optional, non-positional values — a search term, a page number, a filter — belong in the query string rather than the path itself, and are read the same way through route.queryParamMap, or bound as inputs alongside route parameters when withComponentInputBinding() is enabled.