Configuring Routes

Angular's router maps URLs to components, enabling single-page application navigation without page reloads.

Enabling the Router

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)],
};

Defining Routes

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'products/:id', component: ProductDetailComponent },
  { path: '**', component: NotFoundComponent },
];

Router Outlet

The <router-outlet> directive marks where the router renders the matched component:

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  template: `
    <nav>
      <a routerLink="/">Home</a>
      <a routerLink="/about">About</a>
      <a routerLink="/products">Products</a>
    </nav>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {}

Route Path Patterns

Wildcard Route (404)

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

The wildcard route must be last. It catches all unmatched URLs.

The routerLink directive builds hrefs that the Angular router handles without a page reload.

Basic routerLink

<a routerLink="/">Home</a>
<a routerLink="/about">About</a>
<a routerLink="/products">Products</a>

routerLink with Parameters

<a [routerLink]="['/products', product.id]">{{ product.name }}</a>

routerLinkActive

Automatically adds a CSS class when the route is active:

<a routerLink="/home" routerLinkActive="active">Home</a>
<a routerLink="/about" routerLinkActive="active">About</a>

.active {
  font-weight: bold;
  color: blue;
}

Programmatic Navigation

import { Router } from '@angular/router';

@Component({
  selector: 'app-product-list',
  template: `...`,
})
export class ProductListComponent {
  private router = inject(Router);

  viewProduct(id: number): void {
    this.router.navigate(['/products', id]);
  }

  goBack(): void {
    this.router.navigate(['/']);
  }
}

Navigation with Query Params and Fragments

this.router.navigate(['/products'], {
  queryParams: { category: 'electronics', page: '2' },
  fragment: 'reviews',
});

<a [routerLink]="['/products']" [queryParams]="{ category: 'electronics' }" fragment="reviews">
  Electronics
</a>