Angular Routing and Navigation

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },           // Default route
  { path: 'about', component: AboutComponent },
  { path: '**', component: NotFoundComponent }      // Wildcard (404 page)
];

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

export const appConfig = {
  providers: [provideRouter(routes)]
};

<!-- app.component.html -->
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>

<!-- The active component renders here -->
<router-outlet></router-outlet>

<nav>
  <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
    Home
  </a>
  <a routerLink="/products" routerLinkActive="active">Products</a>
  <a routerLink="/about" routerLinkActive="active">About</a>
</nav>

// routes
{ path: 'product/:id', component: ProductDetailComponent }

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({ selector: 'app-product-detail', templateUrl: './product-detail.component.html' })
export class ProductDetailComponent implements OnInit {
  productId: string = '';

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // Read the ':id' parameter from the URL
    this.productId = this.route.snapshot.paramMap.get('id') || '';
  }
}

<!-- Navigate to product detail -->
<a [routerLink]="[&#039;/product', product.id]">View Details</a>

import { Router } from '@angular/router';

export class LoginComponent {
  constructor(private router: Router) {}

  onLoginSuccess(): void {
    // Navigate programmatically after login
    this.router.navigate(['/dashboard']);
  }
}

export const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'admin',
    // Loads the AdminModule only when user visits /admin
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  }
];

export const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'overview', component: OverviewComponent },
      { path: 'analytics', component: AnalyticsComponent }
    ]
  }
];

<!-- dashboard.component.html -->
<div class="sidebar">
  <a routerLink="overview">Overview</a>
  <a routerLink="analytics">Analytics</a>
</div>
<router-outlet></router-outlet>  <!-- Child outlet -->

Routes:
  / → HomeComponent
  /products → ProductListComponent
  /product/:id → ProductDetailComponent
  /about → AboutComponent
  /** → NotFoundComponent (404)