Angular Router Basics

Analogy categoryAnalogies

The Angular Router is a client-side navigation library that maps URL paths to components, letting you build a single-page application (SPA) that feels like a traditional multi-page site. Instead of the browser requesting a new HTML document from the server on every navigation, the router intercepts URL changes, matches them against a list of route definitions, and swaps out the components rendered inside a <router-outlet>. This preserves application state, avoids full page reloads, and lets you build rich transitions between views. In modern Angular (17+), routes are typically configured as a flat array of Routes objects and provided to the application via provideRouter() in a standalone bootstrapApplication() call, replacing the older RouterModule.forRoot() NgModule pattern.

🏏

Cricket analogy: Just as a stadium's giant screen swaps replays without the crowd leaving their seats, the Angular Router swaps components inside a router-outlet without the browser fetching a fresh page from the server, like Eden Gardens showing DRS reviews instantly.

Defining Routes

A route is an object with a path (the URL segment to match, without a leading slash) and either a component (for standalone components) or a loadComponent/loadChildren function for lazy loading. Routes are matched in array order, top to bottom, so more specific paths should generally be listed before more general ones like wildcard ** catch-alls. The empty string path '' matches the root of that route level, which is commonly used for a default/home view.

🏏

Cricket analogy: A route's path is like a fielding position such as gully assigned on the scorecard, matched in the order captains set the field, so a specific catching position must be listed before a generic sweeper else the sweeper claims every ball.

typescript

// 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, title: 'Home' },
  { path: 'about', component: AboutComponent, title: 'About Us' },
  { path: '**', component: NotFoundComponent, title: 'Page Not Found' },
];

// 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)],
});

The router-outlet and RouterLink

<router-outlet> is a placeholder directive that marks where the router should render the component matching the active route. A component template navigates between routes declaratively using the routerLink directive rather than plain <a href> tags, which avoids full-page reloads that href would otherwise trigger. routerLinkActive applies a CSS class automatically when a link's route is currently active, which is the standard way to highlight the current navigation item without manual state tracking.

🏏

Cricket analogy: router-outlet is like the stump camera slot that always shows whichever bowler is currently up, while routerLink is like a scorer clicking a player's name on the digital board instead of manually rewriting the scoreboard each over.

typescript

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>
    </nav>
    <router-outlet />
  `,
})
export class AppComponent {}

Unlike React Router, which is a third-party library with several competing versions and APIs, the Angular Router is a first-party, officially maintained package (@angular/router) that ships as part of the framework and is the de facto standard — there is no ecosystem fragmentation to navigate.

Beyond template-driven routerLink, you can navigate imperatively from component code by injecting the Router service (commonly via the inject() function) and calling router.navigate(['/path']) or router.navigateByUrl('/path'). This is essential after actions like form submission or authentication, where navigation should happen as a side effect of logic rather than a user clicking a link.

🏏

Cricket analogy: It's like a captain deciding to review a decision imperatively after a huddle with teammates rather than waiting for the batsman to signal, matching how router.navigate() fires programmatically after logic like a wicket review completes.

A common beginner mistake is forgetting that router.navigate() takes an array of path segments (a 'link parameters array'), e.g. router.navigate(['/users', userId]), not a single interpolated string. Passing a malformed array silently produces an incorrect URL rather than throwing a compile error.

The Angular Router maps URL paths to components without triggering full page reloads.
Routes are configured as a Routes array and registered with provideRouter() in bootstrapApplication().
<router-outlet> is the placeholder where the matched route's component renders.
Use routerLink for declarative navigation and routerLinkActive to style the active link.
Inject the Router service to navigate programmatically with navigate() or navigateByUrl().
Route order matters — Angular matches top-down, so wildcard ** routes must come last.

Practice what you learned

1. Which function registers a `Routes` array with a standalone Angular application?

2. What happens if a route with path `**` is placed first in the routes array?

3. What is the purpose of `<router-outlet>`?

4. Which directive prevents a navigation link from causing a full browser page reload?

5. How does `router.navigate()` expect its primary argument to be formatted?

Was this page helpful?

Route Parameters and Query Params

Related Study Notes in Web Development

Browse all study notes

Web Development

WebSockets Study Notes

Web Development · 30 topics

Web Development

WebAssembly Study Notes

WebAssembly · 30 topics

Web Development

gRPC Study Notes

Protocol Buffers · 30 topics

Web Development

Spring Boot Study Notes

Java · 30 topics

Web Development

Flask Study Notes

Python · 30 topics

Web Development

Django Study Notes

Python · 30 topics

Topics covered

#TypeScript#AngularStudyNotes#WebDevelopment#AngularRouterBasics#Angular#Router#Defining#Routes#StudyNotes#SkillVeris

Angular Router Basics