Angular Routing Basics: Pages and Navigation

Routing is how Angular switches between pages without reloading the browser.

Step 1: Create two components

• HomeComponent
• AboutComponent

Step 2: Add routes (standalone routing)

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

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

Step 3: Add router outlet

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>

<router-outlet></router-outlet>

How routing works (quick graph)

flowchart LR
  URL[Browser URL] --> Router[Angular Router]
  Router --> Outlet[router-outlet]
  Outlet --> Page[Component Page]

Next: Route parameters, dynamic pages like /products/42.