Angular Router Basics

A single-page application doesn't reload the page when you navigate — it swaps out which component is displayed while staying on the same page load. Angular's Router is what maps a URL to a component and handles that swap.

Defining routes

// app.routes.ts
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 },
  { path: 'about', component: AboutComponent },
  { path: '**', component: NotFoundComponent },
];

Each entry maps a path (the part of the URL after the domain) to a component to render. An empty path ('') matches the app's root URL. The special '**' path is a wildcard that matches anything not matched above it — routes are checked in order, so it belongs last, as a catch-all for unmatched URLs.

Registering the router

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

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

provideRouter(routes) registers the route table with Angular's dependency injection system as part of the app-wide configuration passed to bootstrapApplication — this is the standalone-component replacement for what used to be RouterModule.forRoot(routes) inside a root NgModule.

Rendering the matched component

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

<router-outlet></router-outlet>

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

@Component({
  selector: 'app-root',
  imports: [RouterLink, RouterOutlet],
  templateUrl: './app.component.html',
})
export class AppComponent {}

<router-outlet> is a placeholder — whatever component matches the current URL gets rendered right there. routerLink behaves like an href, but instead of triggering a full page load, it asks the Router to swap the outlet's content and update the URL through the browser's History API, keeping the app on a single page load throughout.

routerLink vs a plain href

Using <a href="/about"> instead of routerLink would technically navigate to the right URL, but it does so by asking the browser to load a brand new page — throwing away the entire Angular application in memory and re-downloading and re-bootstrapping it from scratch. routerLink avoids all of that, which is the entire performance benefit of a single-page application in the first place.

Marking the active link

<a routerLink="/about" routerLinkActive="active-link">About</a>

routerLinkActive adds the given class to the link whenever its routerLink matches the current URL — the standard way to highlight the current page in a navigation bar without manually comparing the URL yourself.