// app.routes.ts (relevant entries)
import { Routes } from '@angular/router';
import { ProductListComponent } from './product-list.component';
import { ProductDetailComponent } from './product-detail.component';

export const routes: Routes = [
  { path: '', component: ProductListComponent },
  { path: 'product/:id', component: ProductDetailComponent },
];

// product-list.component.ts
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

const products = [
  { id: 1, name: 'Keyboard' },
  { id: 2, name: 'Mouse' },
  { id: 3, name: 'Monitor' },
];

@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [RouterLink],
  template: `
    <ul>
      @for (product of products; track product.id) {
        <li><a [routerLink]="['/product', product.id]">{{ product.name }}</a></li>
      }
    </ul>
  `,
})
export class ProductListComponent {
  products = products;
}

// product-detail.component.ts
import { Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

const products = [
  { id: 1, name: 'Keyboard' },
  { id: 2, name: 'Mouse' },
  { id: 3, name: 'Monitor' },
];

@Component({
  selector: 'app-product-detail',
  standalone: true,
  template: `
    @if (product) {
      <h1>{{ product.name }}</h1>
    } @else {
      <p>Product not found.</p>
    }
  `,
})
export class ProductDetailComponent {
  private route = inject(ActivatedRoute);
  private id = Number(this.route.snapshot.paramMap.get('id'));
  product = products.find((p) => p.id === this.id);
}

/*
  Notes:
  - [routerLink]="['/product', product.id]" builds the URL from
    segments — the bound (bracketed) form is used because part of the
    path is a dynamic value.
  - paramMap.get('id') always returns a string, so Number(...) converts
    it before comparing against the numeric product ids.
*/