How to pass route parameters in Angular

// app-routing.module.ts
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'

const routes: Routes = [
  { path: 'user/:id', component: UserDetailComponent },
  { path: 'user/:id/edit', component: UserEditComponent },
  { path: 'category/:categoryId/product/:productId', component: ProductComponent },
  { path: 'search/:term', component: SearchResultsComponent }
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

// user-detail.component.ts
import { Component, OnInit } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router'

@Component({
  selector: 'app-user-detail',
  template: `
    <div *ngIf="userId">
      <h2>User Details for ID: {{ userId }}</h2>
      <button (click)="editUser()">Edit User</button>
    </div>
  `
})
export class UserDetailComponent implements OnInit {
  userId: string | null = null

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit() {
    // Get route parameter
    this.userId = this.route.snapshot.paramMap.get('id')

    // Observable approach for dynamic parameter changes
    this.route.paramMap.subscribe(params => {
      this.userId = params.get('id')
      // Fetch user data based on ID
    })
  }

  editUser() {
    // Navigate with parameter
    this.router.navigate(['/user', this.userId, 'edit'])
  }
}

// Navigation with parameters
function navigateToUser(userId: number) {
  this.router.navigate(['/user', userId])
}