Turn components into pages — the route table, router-outlet and routerLink, route parameters delivered as inputs, and lazy loading with loadComponent.
Why: the router turns components into pages — a route table maps each URL to a component, <router-outlet> marks where the matched page renders, and routerLink navigates without a full page reload. Note: ng new wires the router up for you; the routes file already exists.
// src/app/app.routes.ts — the route table: URL → component
import { Routes } from '@angular/router'
import { Home } from './home'
import { About } from './about'
export const routes: Routes = [
{ path: '', component: Home }, // matches /
{ path: 'about', component: About }, // matches /about
]
// src/app/app.ts — the shell every page renders into
import { Component } from '@angular/core'
import { RouterLink, RouterOutlet } from '@angular/router'
@Component({
selector: 'app-root',
imports: [RouterOutlet, RouterLink],
template: `
<nav>
<!-- routerLink navigates without a full page reload -->
<a routerLink="/">Home</a>
<a routerLink="/about">About</a>
</nav>
<!-- The matched route's component renders here -->
<router-outlet />
`,
})
export class App {}Why: a route like users/:id carries data in the URL, and with withComponentInputBinding the :id part arrives as a normal input — no router plumbing inside the component. Note: add withComponentInputBinding() next to provideRouter(routes) in app.config.ts once.
// src/app/app.routes.ts
// { path: 'users/:id', component: UserDetail }
//
// src/app/app.config.ts — turn the feature on once:
// provideRouter(routes, withComponentInputBinding())
import { Component, input } from '@angular/core'
@Component({
selector: 'app-user-detail',
template: `<h1>User #{{ id() }}</h1>`,
})
export class UserDetail {
// The :id part of the URL, delivered as an ordinary input
id = input.required<string>()
}Why: a page the user might never open — settings, admin, reports — shouldn't be in the initial download. loadComponent fetches the page's code only when its URL is first visited. Smaller first page, same app.
// src/app/app.routes.ts
import { Routes } from '@angular/router'
export const routes: Routes = [
{
path: '',
loadComponent: () => import('./home').then((m) => m.Home),
},
{
path: 'settings',
// This code isn't downloaded until someone opens /settings
loadComponent: () => import('./settings').then((m) => m.Settings),
},
]