Angular Routing and Navigation

The Course Management application developed in the Beginner course currently displays all content on a single page. While this approach works for small applications, it quickly becomes difficult to organize as new features are added. Angular Routing solves this problem by converting the application into a single-page application (SPA), allowing users to navigate between different pages without refreshing the browser.

In this module, you will transform the existing my-first-app into a multi-page Course Management Portal. The application will include a Home page, Courses page, Course Details page, About page, Contact page, Login page, and Dashboard. You'll also secure the Dashboard using Route Guards and use Route Parameters to display information for individual courses.

Angular Routing maps URLs to components. When a user clicks a navigation link, Angular loads the corresponding component inside the router-outlet while keeping the application running on a single page.

Generate the required components.

ng generate component home

ng generate component courses

ng generate component course-details

ng generate component about

ng generate component contact

ng generate component login

ng generate component dashboard

ng generate guard auth

Configure the routes.

// app.routes.ts

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

import { Home } from './home/home';

import { Courses } from './courses/courses';

import { CourseDetails } from './course-details/course-details';

import { About } from './about/about';

import { Contact } from './contact/contact';

import { Login } from './login/login';

import { Dashboard } from './dashboard/dashboard';

import { authGuard } from './auth.guard';

export const routes: Routes = [

{ path: '', component: Home },

{ path: 'courses', component: Courses },

{ path: 'courses/:id', component: CourseDetails },

{ path: 'about', component: About },

{ path: 'contact', component: Contact },

{ path: 'login', component: Login },

{

path: 'dashboard',

component: Dashboard,

canActivate: [authGuard]

},

{ path: '**', redirectTo: '' }

];

Update the application template.

<nav class="navbar">

<h2>Course Management</h2>

<a routerLink="/">Home</a>

<a routerLink="/courses">Courses</a>

<a routerLink="/about">About</a>

<a routerLink="/contact">Contact</a>

<a routerLink="/dashboard">Dashboard</a>

<a routerLink="/login">Login</a>

</nav>

<hr>

<router-outlet></router-outlet>

The Courses page displays a list of available courses. Selecting a course opens a dedicated Course Details page using a dynamic route parameter.

Example URLs:

/courses/1

/courses/2

/courses/3

Retrieve the selected course ID using ActivatedRoute.

import { Component } from '@angular/core';

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

@Component({

selector: 'app-course-details',

standalone: true,

templateUrl: './course-details.html',

styleUrl: './course-details.css'

})

export class CourseDetails {

courseId = '';

constructor(private route: ActivatedRoute) {

this.courseId =

this.route.snapshot.paramMap.get('id') || '';

}

}

Display the selected course.

<h2>Course Details</h2>

<div class="card">

<h3>Angular Fundamentals</h3>

<p><strong>Course ID:</strong> {{ courseId }}</p>

<p><strong>Instructor:</strong> Sarah Johnson</p>

<p><strong>Duration:</strong> 8 Weeks</p>

<p><strong>Level:</strong> Beginner</p>

</div>

The Dashboard contains administrative information and should only be accessible to authenticated users.

Create an authentication guard.

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

export const authGuard: CanActivateFn = () => {

const isLoggedIn = true;

return isLoggedIn;

};

Apply the guard to the Dashboard route.

{

path: 'dashboard',

component: Dashboard,

canActivate: [authGuard]

}

When the guard returns true, Angular loads the Dashboard page. If it returns false, navigation is blocked. In production applications, this value is typically determined by checking whether the user is authenticated.

By combining Route Configuration, Route Parameters, and Route Guards, the Course Management Portal now supports multiple pages, dynamic navigation, and secure routes while maintaining the fast experience of a Single Page Application.

Output: