W3Schools Tryit Editor

main.ts

index.html

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, inject } from '@angular/core';
import { provideRouter, RouterOutlet, RouterLink, RouterLinkActive, ActivatedRoute, withHashLocation } from '@angular/router';

@Component({
  selector: 'home-cmp',
  standalone: true,
  template: `<p>Home works!</p>`
})
export class Home {}

@Component({
  selector: 'product-cmp',
  standalone: true,
  template: `<p>Product ID: {{ id }}</p>`
})
export class Product {
  id = '';
  route = inject(ActivatedRoute);
  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id') ?? '';
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  template: `
    <h3>Router Params</h3>
    <nav>
      <a routerLink="/">Home</a> |
      <a routerLink="/product/1" routerLinkActive="active">Product 1</a> |
      <a routerLink="/product/2" routerLinkActive="active">Product 2</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  styles: [`nav a { margin-right: 6px; } .active { font-weight: bold; }`]
})
export class App {}

const routes = [
  { path: '', component: Home },
  { path: 'product/:id', component: Product }
];

bootstrapApplication(App, {
  providers: [provideRouter(routes, withHashLocation())]
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Angular Router Params</title>
</head>
<body>
  <app-root></app-root>
</body>
</html>