Routing

Basic Routing

Angular Routing

Basic Routing Concepts

Angular Router enables navigation between views without page reloads, creating a smoother user experience.

Setup

Configure routes in a routing module:

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { FormPageComponent } from './form-page/form-page.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'form', component: FormPageComponent },
  { path: '**', redirectTo: '' }  // Wildcard route for 404
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Add router outlet to your main app component:

<!-- app.component.html -->
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/form">Form Page</a>
</nav>

<router-outlet></router-outlet>

Components Setup

// home.component.ts
@Component({
  selector: 'app-home',
  template: '<h1>Welcome Home!</h1>'
})
export class HomeComponent { }

// form-page.component.ts
@Component({
  selector: 'app-form-page',
  template: '<h1>Form Page</h1>'
})
export class FormPageComponent { }

Using RouterLink directive:

<a routerLink="/form">Go to Form</a>

Programmatic navigation:

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

export class NavComponent {
  constructor(private router: Router) {}

  goToForm() {
    this.router.navigate(['/form']);
  }
}

Running Code on Route Changes

To execute code on every route change, use Router events:

// app.component.ts
import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {
  constructor(private router: Router) {
    // Listen to route changes
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      console.log('Route changed to:', event.url);
      // Your code here
    });
  }
}

Using Route Guards

For more control over navigation:

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    // Your logic here
    return true;
  }
}

Apply guard to routes:

const routes: Routes = [
  { 
    path: 'form', 
    component: FormPageComponent,
    canActivate: [AuthGuard]
  }
];

Evaluation Question

Q: “How do you make a service run on every page change?”

A: There are several ways to run a service on page changes:

Using Router Events in a Service:

@Injectable({
  providedIn: 'root'
})
export class RouteService {
  constructor(private router: Router) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      this.onRouteChange();
    });
  }

  private onRouteChange() {
    // Your code here
    console.log('Route changed!');
  }
}

Using Guards:

@Injectable({
  providedIn: 'root'
})
export class RouteGuard implements CanActivate {
  constructor(private myService: MyService) {}

  canActivate(): boolean {
    this.myService.doSomething();
    return true;
  }
}

Best Practices

Always include a default route
Handle 404 cases with a wildcard route
Use route parameters for dynamic content
Implement lazy loading for better performance
Add route guards for protected routes
Use route resolvers for data pre-fetching
Consider using child routes for nested views

Feedback

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.

Last modified March 27, 2025: Edit members.yaml (21070ed)