Routing: setup and routes

The router shows different components at different addresses without reloading the page. The address /posts is the list of posts, /todos is the to-do list. The user can bookmark a page or press Back in the browser, just like on a regular website.

Where routes are configured

A project created with ng new already has the router: src/app/app.config.ts contains provideRouter(routes), and the routes themselves live in src/app/app.routes.ts. Describe them:

// src/app/app.routes.ts
import { Routes } from '@angular/router';
import { PostList } from './post-list/post-list';
import { TodoList } from './todo-list/todo-list';
 
export const routes: Routes = [
  { path: 'posts', component: PostList },
  { path: 'todos', component: TodoList },
];

Each route links a path (without the leading slash) to a component.

A place for the page

The <router-outlet /> tag marks the spot where the router renders the component of the current route. It goes into the main component's template:

<!-- src/app/app.html -->
<h1>My blog</h1>
<router-outlet />

The App class must import RouterOutlet — a new project already has it. Open http://localhost:4200/posts — the post list appears under the heading, and http://localhost:4200/todos shows the to-do list.

Links

An ordinary href link reloads the whole application. For navigation inside it, use the routerLink directive:

// src/app/app.ts
import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 
@Component({
  selector: 'app-root',
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {}

<!-- src/app/app.html -->
<nav>
  <a routerLink="/posts" routerLinkActive="active">Posts</a>
  <a routerLink="/todos" routerLinkActive="active">Tasks</a>
</nav>
<router-outlet />

Clicking the links changes the address and the content without a reload. routerLinkActive adds the active class to the link of the current page — you can highlight it in app.css.

Redirects and a 404 page

// src/app/app.routes.ts
export const routes: Routes = [
  { path: '', redirectTo: 'posts', pathMatch: 'full' },
  { path: 'posts', component: PostList, title: 'Posts' },
  { path: 'todos', component: TodoList, title: 'Tasks' },
  { path: '**', component: NotFound },
];

Create the NotFound component with ng generate component not-found and write "Page not found" in its template. Remember to import it in app.routes.ts.

Common mistake

Putting the ** route anywhere but last. The router checks routes in order and takes the first match, and ** matches any address. Every route after it will never fire. Keep ** last.