bhylu.com

Advertisements

Angular Route Parameters

Route parameters identify a value in a URL path. A route component can be reused when only that value changes, so read a reactive parameter stream when the view must follow later navigation.

How it works

The same detail component displays a drill code and a clamp code. Its toSignal conversion observes paramMap instead of capturing only the first snapshot in a field initializer. The route value is still external text: a real lookup should validate its syntax and handle an unknown record. Rendering the text does not establish that a matching tool exists.

Run the code

Use a separate empty project folder with a compatible Node version: ^22.22.3, ^24.15.0 or a supported 26+ runtime. The review uses Node 24.22.1, Angular 22.2.4, CLI/build 22.2.5 and TypeScript 6.0.3. Node 22.15.1 is too old for Angular 22. Save every download at its displayed path; browsers may keep only the basename, so recreate the src folder. Run npm install, npm run build and npm start, then open the loopback address printed by the server. Run npm test for the supplied component tests. These are local teaching projects, not Bhylu publishing files.

The small loopback server serves the compiled app and fixed, read-only tool API fixtures. It is not a database, authentication or lending service. Angular examples do not run in Bhylu’s current HTML or TypeScript playground. No Apache, MySQL or PHP configuration change is needed.

Example

src/app.ts

import { Component } from '@angular/core';
import { inject } from '@angular/core';
import { ActivatedRoute, RouterLink, RouterOutlet, Routes } from '@angular/router';
import { toSignal } from '@angular/core/rxjs-interop';
import { map } from 'rxjs';
@Component({
  selector: 'bh-route-parameters-part-0',
  standalone: true,
  template: '<p data-result>Tool {{ code() }}</p>',
})
class ToolPage {
  private route = inject(ActivatedRoute);
  code = toSignal(
    this.route.paramMap.pipe(map((params) => params.get('code') ?? 'Missing')),
    { initialValue: 'Missing' },
  );
}
export const routes: Routes = [
  { path: '', redirectTo: 'tools/DR-4', pathMatch: 'full' },
  { path: 'tools/:code', component: ToolPage },
];
@Component({
  selector: 'bh-route-parameters',
  standalone: true,
  imports: [RouterLink, RouterOutlet],
  template: `<a routerLink="/tools/DR-4">Drill</a> <a routerLink="/tools/CL-2">Clamp</a
    ><router-outlet></router-outlet>`,
})
export class App {}

Expected result

Tool DR-4

Navigating to Clamp updates the reused component to Tool CL-2. The test verifies both parameter values. Query parameters are a separate URL channel and have their own map; use the one that represents the intended navigation contract.

Supporting source

src/app.config.ts

import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app';
export const appConfig: ApplicationConfig = {
  providers: [provideZonelessChangeDetection(), provideRouter(routes)],
};

Advertisements