The Angular Router maps URLs to components, enabling multi-view single-page applications without full page reloads.

Basic Route Configuration

src/app/app.routes.ts:

  import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', redirectTo: '' }  // Wildcard — unknown URLs
];

Register routes in app.config.ts:

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

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

Display routed components in the root template:

  <!-- app.component.html -->
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

Import RouterLink and RouterOutlet in standalone root components.

Programmatic Navigation 

  import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  standalone: true,
  template: `<button (click)="goToDashboard()">Enter</button>`
})
export class LoginComponent {
  private router = inject(Router);

  goToDashboard() {
    this.router.navigate(['/dashboard']);
  }
}

Route Parameters 

  export const routes: Routes = [
  { path: 'users/:id', component: UserDetailComponent }
];

Read the parameter in the component:

  import { Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user-detail',
  standalone: true,
  template: `<h1>User {{ userId }}</h1>`
})
export class UserDetailComponent {
  private route = inject(ActivatedRoute);
  userId = this.route.snapshot.paramMap.get('id');
}

Link with parameters:

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

Lazy Loading and Guards

Load features on demand and protect routes:

  export const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () =>
      import('./admin/admin.component').then(m => m.AdminComponent),
    canActivate: [authGuard]
  }
];

export const authGuard: CanActivateFn = () => {
  const router = inject(Router);
  return !!localStorage.getItem('token') || router.createUrlTree(['/login']);
};

Add CanActivateFn and Router imports at the top of the routes file.

Routing keeps your app organized — each URL maps to a focused component with clear navigation patterns.