Angular Routing Basics: Pages and Navigation
Create multiple pages in Angular using the Router, including links and router-outlet.
Routing is how Angular switches between pages without reloading the browser. ## Step 1: Create two components - HomeComponent - AboutComponent ## Step 2: Add routes (standalone routing) ```ts 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 ```html <nav> <a routerLink="/">Home</a> <a routerLink="/about">About</a> </nav> <router-outlet></router-outlet> ``` ## How routing works (quick graph) ```mermaid flowchart LR URL[Browser URL] --> Router[Angular Router] Router --> Outlet[router-outlet] Outlet --> Page[Component Page] ``` > Next: Route parameters, dynamic pages like /products/42.