Routing and Navigation

Routing and Navigation

The Angular Router maps URLs to components. Applications that grow beyond one screen need a router so users can move between pages, share links, and use browser navigation.

Define routes

Routes are a list of objects matching paths to components:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'post/:id', component: PostComponent },
]

An empty path is the default page, and post/:id captures a route parameter.

Mount the router

Register the routes with provideRouter and place the outlet where matched components are rendered:

providers: [provideRouter(routes)]

<router-outlet></router-outlet>

Navigation links

routerLink builds navigation without full page reloads:

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

routerLinkActive marks the current link as active, ideal for menus:

<a routerLink="/" routerLinkActive="active">Home</a>

Reading parameters

A component reads its route parameter through ActivatedRoute:

constructor(private route: ActivatedRoute) {
  const id = this.route.snapshot.paramMap.get('id');
}

Redirects and 404s

Redirect empty paths and catch unknown ones:

{ path: 'old', redirectTo: '/new', pathMatch: 'full' },
{ path: '**', component: NotFoundComponent }

Key Points

• Routes map path strings to components.
• router-outlet renders the matched component.
• routerLink navigates without reloading.
• Route parameters identify dynamic records.
• Wildcard paths handle not-found pages.