// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: 'users',     component: UserListComponent },
  { path: 'users/:id', component: UserDetailComponent },  // :id is a parameter

  // Multiple parameters
  { path: 'blog/:year/:month/:slug', component: BlogPostComponent },

  // Optional segment (use separate routes or query params for optional data)
  { path: 'products/:category',     component: ProductListComponent },
  { path: 'products/:category/:id', component: ProductDetailComponent },
];

import { Component, inject, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserService } from './user.service';
import { User } from './user.model';

@Component({
  standalone: true,
  template: `
    <div *ngIf="user">
      <h1>{{ user.name }}</h1>
      <p>{{ user.email }}</p>
    </div>
  `,
})
export class UserDetailComponent implements OnInit {
  private route = inject(ActivatedRoute);
  private userService = inject(UserService);
  user: User | null = null;

  ngOnInit() {
    // Option 1: snapshot — reads once
    const id = this.route.snapshot.paramMap.get('id');
    if (id) this.loadUser(+id);

    // Option 2: observable — reacts to changes
    this.route.paramMap.subscribe(params => {
      const id = params.get('id');
      if (id) this.loadUser(+id);
    });
  }

  private loadUser(id: number) {
    this.userService.getUser(id).subscribe(user => (this.user = user));
  }
}

// main.ts — enable input binding
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withComponentInputBinding } from '@angular/router';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withComponentInputBinding()),
  ],
});

// user-detail.component.ts — receive :id as an @Input
import { Component, Input, OnChanges, inject } from '@angular/core';
import { UserService } from './user.service';

@Component({
  standalone: true,
  template: `<h1>User {{ id }}</h1>`,
})
export class UserDetailComponent implements OnChanges {
  @Input() id!: string;   // automatically populated from :id param

  private userService = inject(UserService);

  ngOnChanges() {
    // Called every time id changes (same component, different param)
    this.userService.getUser(+this.id).subscribe(/* ... */);
  }
}

// Navigate with query params
import { Router } from '@angular/router';

const router = inject(Router);

router.navigate(['/products'], {
  queryParams: { category: 'electronics', page: 2, sort: 'price-asc' },
});

// Preserve existing query params when navigating
router.navigate(['/products'], {
  queryParams: { page: 3 },
  queryParamsHandling: 'merge',    // keeps other existing params
  // queryParamsHandling: 'preserve' — keeps ALL existing params unchanged
});

<!-- routerLink with query params -->
<a
  [routerLink]="['/products']"
  [queryParams]="{ category: 'books', page: 1 }"
>Books</a>

<!-- Link that adds to existing query params -->
<a
  [routerLink]="['/products']"
  [queryParams]="{ page: nextPage }"
  queryParamsHandling="merge"
>Next Page</a>

// Reading query params
import { ActivatedRoute } from '@angular/router';

const route = inject(ActivatedRoute);

// Snapshot (once)
const category = route.snapshot.queryParamMap.get('category');
const page     = +(route.snapshot.queryParamMap.get('page') ?? '1');

// Observable (reacts to changes)
route.queryParamMap.subscribe(params => {
  const category = params.get('category') ?? '';
  const page     = +(params.get('page') ?? '1');
  // load data...
});

// As a plain object
route.queryParams.subscribe(params => {
  console.log(params['category'], params['page']);
});

// Navigate with fragment
router.navigate(['/docs/routing'], { fragment: 'advanced' });
// URL becomes: /docs/routing#advanced

<a [routerLink]="['/docs/routing']" fragment="advanced">Advanced Routing</a>

// Read the fragment
route.fragment.subscribe(fragment => {
  if (fragment) {
    document.querySelector(`#${fragment}`)?.scrollIntoView();
  }
});

// app.routes.ts
const routes: Routes = [
  {
    path: 'admin/users',
    component: AdminUsersComponent,
    data: {
      title: 'User Management',
      breadcrumb: ['Admin', 'Users'],
      requiredRole: 'ADMIN',
    },
  },
];

// Reading in the component
const title = route.snapshot.data['title'];
const role  = route.snapshot.data['requiredRole'];

// Sender component
router.navigate(['/checkout/success'], {
  state: { orderId: 'ORD-123', total: 99.99 },
});

// Receiver component
import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';

@Component({ standalone: true, template: `...` })
export class CheckoutSuccessComponent {
  private router = inject(Router);

  // State is available via the router's current navigation
  orderId: string = this.router.getCurrentNavigation()?.extras.state?.['orderId'] ?? '';
  // or via window.history.state (after the navigation completes)
}