Angular Routing

Angular routing is a powerful feature that allows you to navigate between different views or components in your Angular application. It enables you to create single-page applications (SPAs) where the content changes dynamically without reloading the entire page.

setup

When an Angular app is created, the Angular CLI automatically sets up routing for you.

Routing is set up in app.config.ts. The routes are imported and passed to the provideRouter function.

import { routes } from './app.routes';

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

app.routes.ts is where you define your routes. The Routes type is imported from @angular/router, and the routes are defined as an array of objects. Each object represents a route and contains properties such as path and component.

import { Routes } from '@angular/router';

export const routes: Routes = [];

Adding Routes

Create components profile and about using the Angular CLI:

ng generate component home
ng generate component todo-list
ng generate component todo-detail
ng generate component page-not-found

In app.routes.ts, import the components and add them to the routes array:

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { TodoListComponent } from './todo-list/todo-list.component';
import { TodoDetailComponent } from './todo-detail/todo-detail.component';

export const routes: Routes = [
    {
        path: '',
        title: 'Home',
        component: HomeComponent
    },
    {
        path: 'todo-list',
        title: 'Todo List',
        component: TodoListComponent
    },
    {
        path: 'todo-detail/:id',
        title: 'Todo Detail',
        component: TodoDetailComponent
    },
    {
        path: '**',
        title: 'Page Not Found',
        component: PageNotFoundComponent
    }
];

The two asterisks, ** indicate to Angular that this routes definition is a wildcard route.

Router Outlet

The <router-outlet> element informs Angular to update the application view with the component for the selected route.

<router-outlet />

Getting Query Parameters

To access query parameters in Angular, you can use the ActivatedRoute service. This service provides access to information about a route associated with a component that is loaded in an outlet.

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

Now you can inject the ActivatedRoute service into your component and access the query parameters.

private readonly route = inject(ActivatedRoute);
id = this.route.snapshot.paramMap.get('id');

RouetrLink

To navigate between routes in Angular, you can use the routerLink directive. This directive allows you to bind a link to a specific route.

<a [routerLink]="['/todo-list']">Todo List</a>
<a [routerLink]="['/todo-detail', todo.id]">Todo Detail</a>

RouterLinkActive

The routerLinkActive directive is used to add a CSS class to an element when the associated route is active. This is useful for styling navigation links based on the current route.

<a [routerLink]="['/todo-list']" routerLinkActive="active">Todo List</a>
<a [routerLink]="['/todo-detail', todo.id]" routerLinkActive="active">Todo Detail</a>

Router Navigation

To programmatically navigate to a route in Angular, you can use the Router service. This service provides methods for navigating to different routes in your application.

import { Router } from '@angular/router';
import { inject } from '@angular/core';
const router = inject(Router);

router.navigate(['/todo-list']);

Lazy Loading

Lazy loading is a technique in Angular that allows you to load feature modules on demand, rather than loading them all at once when the application starts. This can significantly improve the initial load time of your application.

{
    path: 'about',
    loadComponent: () => import('./about/about.component').then(m => m.AboutComponent)
}

Reference

• Angular Routing