Angular Routing and Navigation — Router Guide

Routing

Angular Router is a powerful JavaScript router built and maintained by the Angular core team. It can be imported from the @angular/router package. Angular routing enables navigation from one view to another without a page reload. In Angular 21, routing is configured using provideRouter() in app.config.ts instead of importing RouterModule in an NgModule.

Routing and Navigation Steps

Routing & navigation can be easily enable by using below steps-

Step 1

Add base path to src/index.html file

Example


											<base href="/">

Step 2

In Angular 21, configure routes using provideRouter() in app.config.ts and define routes in app.routes.ts. No NgModule needed.

Standalone Routing (Angular 21)

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

export const routes: Routes = [
  { path: '',        redirectTo: 'home', pathMatch: 'full' },
  { path: 'home',      component: HomeComponent },
  { path: 'about',     component: AboutComponent },
  { path: 'dashboard', component: DashboardComponent },
  { path: '**',        redirectTo: 'home' }
];

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

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

Step 3

Add RouterOutlet, which is a directive from the router library that is used like a placeholder for all the component. RouterOutlet it is a spot in the template where the router should display the components for that outlet.

Example


											<!-- Routed components will be display here -->
											<router-outlet></router-outlet>

Step 4

Add RouterLink and RouterLinkActive.

RouterLink & RouterOutlet

import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterLink, RouterLinkActive, RouterOutlet],
  template: `
    <h1>Angular Router</h1>
    <nav>
      <a routerLink="/home"      routerLinkActive="active">Home</a>
      <a routerLink="/about"     routerLinkActive="active">About</a>
      <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
    </nav>
    <router-outlet />
  `
})
export class AppComponent { }

Programmatic Navigation

Use the Router service to navigate programmatically from TypeScript code using inject():

Programmatic Navigation

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

@Component({
  selector: 'app-home',
  standalone: true,
  template: `
    <h2>Home</h2>
    <button (click)="goToDashboard()">Go to Dashboard</button>
  `
})
export class HomeComponent {
  private router = inject(Router);

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