Routing and RouterOutlet

12 min read

Client-Side Routing in Angular

Angular's @angular/router enables single-page application routing — navigating between views without a full page reload. You define a route configuration array mapping URL paths to components, then use <router-outlet> as the placeholder where the matched component renders.

// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { UserDetailComponent } from './users/user-detail.component';
import { NotFoundComponent } from './not-found.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'users/:id', component: UserDetailComponent },
  // Lazy-load a feature module
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./dashboard/dashboard.component').then(m => m.DashboardComponent)
  },
  { path: '**', component: NotFoundComponent }
];

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

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

Using RouterOutlet and RouterLink

import { Component } from '@angular/core';
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  template: `
    <nav>
      <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Home</a>
      <a routerLink="/about" routerLinkActive="active">About</a>
      <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
    </nav>
    <main>
      <router-outlet />
    </main>
  `
})
export class AppComponent {}

Use loadComponent (for standalone) or loadChildren (for feature routes) to implement lazy loading. This splits your bundle so users only download the code for routes they visit, dramatically improving initial load time.

Reading Route Parameters

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

@Component({
  selector: 'app-user-detail',
  standalone: true,
  template: `<p>User ID: {{ userId }}</p>`
})
export class UserDetailComponent implements OnInit {
  private route = inject(ActivatedRoute);
  userId = '';

  ngOnInit() {
    this.userId = this.route.snapshot.paramMap.get('id') ?? '';
  }
}

Ready to test yourself?

Practice Angular— quiz & coding exercises