LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 2917 min read

Angular Router Basics

Add multi-page navigation to a standalone Angular app using the built-in Angular Router.

Configuring Routes

Routes are defined as a plain array mapping URL paths to standalone components, provided app-wide via provideRouter.

// 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 },
];
// 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)],
};

router-outlet

<router-outlet> marks the spot in a template where the currently matched route's component renders.

// app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';


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

routerLink is Angular's equivalent of a framework-aware anchor tag — it performs client-side navigation without a full page reload.

<a routerLink="/about">About</a>
<a [routerLink]="['/products', product.id]">{{ product.name }}</a>
<a routerLink="/about" routerLinkActive="active-link">About</a>
Always Use routerLink for Internal Navigation

A plain <a href="/about"> triggers a full page reload, losing all Angular application state — routerLink intercepts the click and updates the view without reloading anything.

Programmatic Navigation

For navigation triggered by code — after a form submits, for example — inject the Router service and call its navigate method.

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


@Component({ selector: 'app-login', standalone: true, template: `...` })
export class LoginComponent {
  private router = inject(Router);


  async handleLogin() {
    await this.login();
    this.router.navigate(['/dashboard']);
  }
}

Common Beginner Mistakes

Forgetting to import RouterOutlet/RouterLink in a standalone component

Both are standalone directives themselves and must be added to a component's imports array before its template can use router-outlet or routerLink.

Using a plain <a> tag for internal links

This causes a full page reload — always use routerLink for links within your own app.

FAQs

Yes — named outlets let you render multiple route-driven components simultaneously in different layout regions, similar in spirit to parallel routes in other frameworks.

It applies a CSS class automatically when that link's route is the currently active one — commonly used to highlight the active item in a navigation menu.

Summary

The Angular Router turns your app into a multi-page experience using client-side navigation, with router-outlet rendering the matched component. Next, you'll add dynamic route parameters and nested routes.

Next Lesson →

Route Parameters & Nested Routes