📘 Day 4 — Angular Routing, Navigation, Route Params, Guards & Lazy Loading

Zero to Hero — Hands-on, Blog-Style Tutorial

By the end of Day 4, you’ll know:

• ✔️ How Angular routing works
• ✔️ How to create pages
• ✔️ How to navigate between pages
• ✔️ How to extract route parameters
• ✔️ How to use signals with routing
• ✔️ How to add navigation menus
• ✔️ How to create a guard (AuthGuard)
• ✔️ How to lazy-load standalone components

Let’s build a real multi-page Angular app! 🚀

---

🟦 1. What Is Angular Routing?

Routing allows Angular to show different components based on URL.

Example:

URL	Screen
/	Home page
/about	About page
/users/5	User detail page
/dashboard	Admin dashboard (maybe protected)

Routing = SPA navigation without page reloads.

---

🟩 2. Create Pages (Standalone Components)

Let’s build 3 pages:

ng g component pages/home --standalone
ng g component pages/about --standalone
ng g component pages/user-details --standalone

Now you have:

pages/
 ├─ home/
 ├─ about/
 └─ user-details/

---

🟧 3. Define Routes (In app.routes.ts)

Open: src/app/app.routes.ts

Replace with:

import { Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { AboutComponent } from './pages/about/about.component';
import { UserDetailsComponent } from './pages/user-details/user-details.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'users/:id', component: UserDetailsComponent }
];

• ✔️ :id is a route parameter
• ✔️ '' means “home/root route”

---

🟥 4. Add Router to AppComponent

Open: app.component.ts

Add router imports:

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

@Component({
  ...
  imports: [RouterOutlet, RouterLink],
})
export class AppComponent {}

Update template: app.component.html

<nav>
  <a routerLink="">Home</a>
  <a routerLink="about">About</a>
  <a routerLink="users/1">User #1</a>
</nav>

<hr />

<router-outlet></router-outlet>

• ✔️ routerLink = navigation
• ✔️ router-outlet = where pages display

Now try clicking the links!

---

🟩 5. Extracting Route Parameters (ActivatedRoute)

In user-details.component.ts:

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

@Component({
  selector: 'app-user-details',
  standalone: true,
  templateUrl: './user-details.component.html',
})
export class UserDetailsComponent {
  route = inject(ActivatedRoute);
  userId = signal('');

  constructor() {
    this.route.paramMap.subscribe(params => {
      this.userId.set(params.get('id') ?? '');
    });
  }
}

Template:

<h2>User Details</h2>
<p>User ID from URL: {{ userId() }}</p>

Now navigate to: /users/99

You will see:

User ID from URL: 99

• ✔️ You learned dynamic routing
• ✔️ You used signals to store route data

---

🟦 6. Programmatic Navigation (Router)

In HomeComponent, add a “Go to user” button.

home.component.ts:

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

@Component({
  selector: 'app-home',
  standalone: true,
  templateUrl: './home.component.html',
})
export class HomeComponent {
  router = inject(Router);

  goToUser() {
    this.router.navigate(['/users/5']);
  }
}

home.component.html:

<h2>Welcome to Home</h2>

<button (click)="goToUser()">Go to User 5</button>

• ✔️ router.navigate() for logic-based navigation

---

🟥 7. Add Active Route Styling (routerLinkActive)

In your nav:

<nav>
  <a routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
  <a routerLink="about" routerLinkActive="active">About</a>
  <a routerLink="users/1" routerLinkActive="active">User #1</a>
</nav>

Add css:

.active {
  font-weight: bold;
  color: #1976d2;
}

• ✔️ Auto-highlighting of current page
• ✔️ Common in dashboards

---

🟫 8. Route Guards — Protecting Routes

Let’s build AuthGuard.

Generate:

ng g guard auth --standalone

Open: auth.guard.ts:

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

export const authGuard: CanActivateFn = () => {
  const isLoggedIn = false; // change later — will use real auth

  return isLoggedIn ? true : false;
};

Now protect a route:

{
  path: 'dashboard',
  loadComponent: () =>
    import('./pages/dashboard/dashboard.component').then(m => m.DashboardComponent),
  canActivate: [authGuard]
}

Try opening /dashboard → you get blocked ✔️

Later (Day 8), we build real authentication.

---

🟧 9. Lazy Loading (Modern Standalone Version)

Lazy loading is critical in large apps.

Let’s lazy load the About page.

Change:

{ path: 'about', component: AboutComponent }

To:

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

• ✔️ No NgModule
• ✔️ Page loads only when user navigates
• ✔️ Angular 17+ best practice

---

🟦 10. Real-World Example: Nested Routes

Let’s add:

• /users/:id/profile
• /users/:id/settings

Inside routes:

{
  path: 'users/:id',
  children: [
    { path: 'profile', loadComponent: () => import('./pages/user-profile/user-profile.component').then(m => m.UserProfileComponent) },
    { path: 'settings', loadComponent: () => import('./pages/user-settings/user-settings.component').then(m => m.UserSettingsComponent) }
  ]
}

This structure mirrors real enterprise apps.

---

🎉 End of Day 4 — What You Learned

Today you covered A LOT:

• ✔️ Routing basics
• ✔️ routerLink & router-outlet
• ✔️ Route parameters (:id)
• ✔️ ActivatedRoute + signals
• ✔️ Programmatic navigation
• ✔️ Active route highlighting
• ✔️ Guards (canActivate)
• ✔️ Lazy loading
• ✔️ Nested routes
• ✔️ Building multiple pages

You now understand exactly how modern Angular apps are structured.

This is huge. You’re leveling up fast 💪.

---

🧪 Day 4 Challenge

Create:

👉 A “Products” section with:

1. /products → ProductListComponent
2. /products/:id → ProductDetailsComponent
3. Fetch the product ID
4. Add a “Back” button using programmatic navigation
5. Protect /products/:id using authGuard