Getting Started with Angular Router

The Angular Router enables client-side navigation between views, supporting nested routes, lazy loading, route guards, and resolvers.

Define Routes

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

export const routes: Routes = [
  { path: '',           redirectTo: 'home', pathMatch: 'full' },
  { path: 'home',       loadComponent: () => import('./home/home.component').then(m => m.HomeComponent) },
  { path: 'users',      loadComponent: () => import('./users/user-list.component').then(m => m.UserListComponent) },
  { path: 'users/:id',  loadComponent: () => import('./users/user-detail.component').then(m => m.UserDetailComponent) },
  { path: '**',         loadComponent: () => import('./not-found/not-found.component').then(m => m.NotFoundComponent) },
];

Register Router

// app.config.ts
import { provideRouter, withComponentInputBinding } from '@angular/router';
import { routes } from './app.routes';

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

RouterOutlet and RouterLink

<!-- app.component.html -->
<nav>
  <a routerLink="/home"  routerLinkActive="active">Home</a>
  <a routerLink="/users" routerLinkActive="active">Users</a>
</nav>

<router-outlet />

Nested Routes

{ path: 'dashboard',
  loadComponent: () => import('./dashboard/dashboard.component').then(m => m.DashboardComponent),
  children: [
    { path: 'stats',    loadComponent: () => import('./dashboard/stats.component').then(m => m.StatsComponent) },
    { path: 'settings', loadComponent: () => import('./dashboard/settings.component').then(m => m.SettingsComponent) },
  ]
}