Skip to main content

​
Angular Routing

Angular Router enables navigation between different views in your application. It provides a powerful routing system with features like lazy loading, route guards, and parameterized routes.

​
Route Configuration

Routes are defined in a Routes array that maps URL paths to components: 
import { Routes } from '@angular/router';
import { CounterPage } from './pages/counter/counter-page';
import { HeroPageComponent } from './pages/hero/hero-page.component';
import { DragonballPage } from './pages/dragonball/dragonball-page';
import { DragonballSuperPage } from './pages/dragonball-super/dragonball-super-page';

export const routes: Routes = [
  {
    path: '',
    component: CounterPage,
  },
  {
    path: 'hero',
    component: HeroPageComponent,
  },
  {
    path: 'dragonball',
    component: DragonballPage,
  },
  {
    path: 'dragonball-super',
    component: DragonballSuperPage,
  },
  {
    path: '**',
    redirectTo: '',
  }
];
Source: src/app/app.routes.ts:1-28

​
Route Properties

​
Root Route

The empty path ('') defines the default route: 
{
  path: '',
  component: CounterPage,
}
This component loads when users visit the application root.

​
Named Routes

Define routes with specific path segments: 
{
  path: 'hero',
  component: HeroPageComponent,
}
This route activates when navigating to /hero.

​
Wildcard Route

Catch all unmatched routes with **: 
{
  path: '**',
  redirectTo: '',
}
Always place the wildcard route last in your routes array. Routes are matched in order, and the wildcard will match everything.

​
Providing Routes

Register routes in your application configuration: 
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes)
  ]
};
Source: src/app/app.config.ts:1-11

​
Router Outlet

The <router-outlet> directive marks where routed components should render: 
<app-navbar></app-navbar>
<router-outlet />
<footer>Soy un footer</footer>
Source: src/app/app.html:1-3 
import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Navbar } from "./components/shared/navbar/navbar";

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, Navbar],
  templateUrl: './app.html',
})
export class App {
  protected readonly title = signal('Miguel');
}
Source: src/app/app.ts:1-13
The <router-outlet /> can be used as a self-closing tag. The routed component replaces this element in the DOM.
Use the RouterLink directive for declarative navigation: 
import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive } from "@angular/router";

@Component({
  selector: 'app-navbar',
  imports: [RouterLink, RouterLinkActive],
  templateUrl: './navbar.html',
})
export class Navbar {}
Source: src/app/components/shared/navbar/navbar.ts:1-11 Multiple ways to bind routes: 
<nav>
  <!-- String binding -->
  <a routerLink="/" routerLinkActive="active"
     [routerLinkActiveOptions]="{exact:true}">Contador</a>
  
  <!-- Array binding -->
  <a [routerLink]="['/hero']" [routerLinkActive]="'active'">Hero</a>
  <a [routerLink]="['/dragonball']" [routerLinkActive]="'active'">Dragonball</a>
  <a [routerLink]="['/dragonball-super']" [routerLinkActive]="'active'">Dragonball Super</a>
</nav>
Source: src/app/components/shared/navbar/navbar.html:21-27

​
RouterLinkActive

Automatically apply CSS classes to active routes: 
<a routerLink="/" 
   routerLinkActive="active"
   [routerLinkActiveOptions]="{exact:true}">
  Contador
</a>

​
Exact Matching

Use routerLinkActiveOptions with exact: true for the root route to prevent it from being active on all routes: 
<a routerLink="/" 
   routerLinkActive="active"
   [routerLinkActiveOptions]="{exact:true}">
  Home
</a>
Without exact: true, the root route (/) would match all routes since every path starts with /.

​
Programmatic Navigation

Navigate using the Router service in TypeScript: 
import { Router } from '@angular/router';

export class MyComponent {
  constructor(private router: Router) {}

  navigateToHero() {
    this.router.navigate(['/hero']);
  }

  navigateWithParams() {
    this.router.navigate(['/hero', { id: 1 }]);
  }
}

​
Route Parameters

Define dynamic route segments: 
export const routes: Routes = [
  {
    path: 'hero/:id',
    component: HeroDetailComponent,
  }
];
Access parameters in your component: 
import { ActivatedRoute } from '@angular/router';
import { signal } from '@angular/core';

export class HeroDetailComponent {
  heroId = signal<string | null>(null);

  constructor(private route: ActivatedRoute) {
    this.route.paramMap.subscribe(params => {
      this.heroId.set(params.get('id'));
    });
  }
}

​
Bootstrapping with Router

Connect routing to your application: 
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';

bootstrapApplication(App, appConfig)
  .catch((err) => console.error(err));
Source: src/main.ts:1-6

​
Best Practices

Routing Tips:
  • Always define a wildcard route (**) as the last route
  • Use exact: true for root routes with RouterLinkActive
  • Prefer array syntax for RouterLink when working with dynamic paths
  • Import standalone routing directives in component imports array
  • Use route guards to protect sensitive routes

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us