Backend interview prep

Start

Angular Router Events

Master Angular Router Events with NavigationStart, NavigationEnd, NavigationCancel, NavigationError, ResolveStart, ResolveEnd, GuardsCheck, lazy loading events, loading indicators, enterprise architecture diagrams, best practices, and interview questions.

Angular Router Events - Complete Guide

Angular Router provides a powerful event system that allows developers to monitor every stage of the routing lifecycle.

Whenever a user navigates from one page to another, Angular emits a series of Router Events.

These events help developers:

  • Show loading indicators
  • Track navigation
  • Log analytics
  • Measure performance
  • Handle navigation errors
  • Debug routing
  • Monitor lazy loading
  • Improve user experience

Router Events are widely used in enterprise applications such as:

  • Banking Applications
  • Insurance Portals
  • Healthcare Systems
  • CRM Applications
  • ERP Systems

They are also a popular Angular interview topic.

Table of Contents

  • What are Router Events?
  • Router Navigation Lifecycle
  • Common Router Events
  • Subscribing to Router Events
  • Navigation Events
  • Guard Events
  • Resolver Events
  • Lazy Loading Events
  • Showing Loading Indicators
  • Analytics Integration
  • Enterprise Banking Example
  • Best Practices
  • Common Mistakes
  • Top 10 Interview Questions
  • Summary

What are Router Events?

Router Events are notifications emitted by Angular whenever navigation occurs.

Examples include:

  • Navigation started
  • Guards executed
  • Resolver executed
  • Lazy module loaded
  • Navigation completed
  • Navigation cancelled
  • Navigation failed

Router Navigation Lifecycle

flowchart LR

User

User --> NavigationStart

NavigationStart --> RoutesRecognized

RoutesRecognized --> GuardsCheckStart

GuardsCheckStart --> GuardsCheckEnd

GuardsCheckEnd --> ResolveStart

ResolveStart --> ResolveEnd

ResolveEnd --> NavigationEnd

Why Router Events?

Without Router Events

Navigation

↓

Unknown Progress

↓

User Waits

Problems

  • No loading indicator
  • Difficult debugging
  • No analytics
  • Poor user experience

With Router Events

Navigation

↓

Loading

↓

Validation

↓

Data Loaded

↓

Navigation Complete

Benefits

  • Better UX
  • Navigation tracking
  • Analytics
  • Performance monitoring
  • Easier debugging

Common Router Events

Event Purpose
NavigationStart Navigation begins
RoutesRecognized Route matched
GuardsCheckStart Guard execution starts
GuardsCheckEnd Guard execution finishes
ResolveStart Resolver starts
ResolveEnd Resolver completes
NavigationEnd Navigation successful
NavigationCancel Navigation cancelled
NavigationError Navigation failed
RouteConfigLoadStart Lazy loading begins
RouteConfigLoadEnd Lazy loading finishes
Scroll Scroll position restored or updated

Router Event Flow

flowchart TD

NavigationStart

NavigationStart --> RoutesRecognized

RoutesRecognized --> GuardsCheckStart

GuardsCheckStart --> GuardsCheckEnd

GuardsCheckEnd --> ResolveStart

ResolveStart --> ResolveEnd

ResolveEnd --> NavigationEnd

Subscribing to Router Events

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

constructor(
  private router: Router
){

  this.router.events.subscribe(
    (event: Event) => {

      console.log(event);

    }
  );

}

Angular emits each routing event during navigation.

Filtering Router Events

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

import { filter } from 'rxjs/operators';

this.router.events
.pipe(

filter(
event => event instanceof NavigationEnd
)

)
.subscribe(event => {

console.log(event);

});

This listens only for successful navigation.

NavigationStart

Triggered immediately when navigation begins.

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

this.router.events.subscribe(event => {

if(event instanceof NavigationStart){

console.log('Navigation Started');

}

});

Use cases

  • Show loader
  • Cancel pending requests
  • Start performance timer

NavigationEnd

Occurs after successful navigation.

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

this.router.events.subscribe(event=>{

if(event instanceof NavigationEnd){

console.log(
'Navigation Finished'
);

}

});

Use cases

  • Hide loader
  • Send analytics
  • Scroll restoration
  • Update page title

Navigation Timeline

sequenceDiagram

participant User

participant Router

participant Guards

participant Resolver

participant Component

User->>Router: Navigate

Router->>Guards: Validate

Guards->>Resolver: Load Data

Resolver->>Component: Create Component

Component-->>User: Display Page

NavigationCancel

Occurs when navigation is cancelled.

Example reasons

  • Route guard returned false
  • Redirect to another page
  • User changed navigation quickly
if(event instanceof NavigationCancel){

console.log(
'Navigation Cancelled'
);

}

NavigationError

Triggered when navigation fails.

if(event instanceof NavigationError){

console.log(event.error);

}

Common causes

  • Resolver failure
  • Invalid route configuration
  • Runtime exception
  • Failed lazy loading

Guard Events

Angular emits guard-related events.

GuardsCheckStart

↓

CanActivate

↓

CanMatch

↓

CanActivateChild

↓

GuardsCheckEnd

These events help measure authorization performance.

Guard Event Flow

flowchart LR

Navigation

Navigation --> GuardsCheckStart

GuardsCheckStart --> AuthGuard

AuthGuard --> RoleGuard

RoleGuard --> GuardsCheckEnd

Resolver Events

Resolvers also emit events.

ResolveStart

↓

API

↓

ResolveEnd

Useful for

  • Loading indicators
  • API timing
  • Performance monitoring

Resolver Architecture

flowchart LR

Navigation

Navigation --> ResolveStart

ResolveStart --> API

API --> ResolveEnd

ResolveEnd --> Component

Lazy Loading Events

Angular emits events while downloading lazy-loaded routes.

Events

  • RouteConfigLoadStart
  • RouteConfigLoadEnd

Example

import {
  RouteConfigLoadStart,
  RouteConfigLoadEnd
} from '@angular/router';

this.router.events.subscribe(event => {

if(event instanceof RouteConfigLoadStart){

console.log(
'Loading Module...'
);

}

if(event instanceof RouteConfigLoadEnd){

console.log(
'Module Loaded'
);

}

});

Lazy Loading Flow

flowchart TD

Navigation

Navigation --> RouteConfigLoadStart

RouteConfigLoadStart --> DownloadModule

DownloadModule --> RouteConfigLoadEnd

RouteConfigLoadEnd --> Component

Showing a Global Loading Indicator

loading = false;

this.router.events.subscribe(event => {

if(event instanceof NavigationStart){

this.loading = true;

}

if(
event instanceof NavigationEnd ||
event instanceof NavigationCancel ||
event instanceof NavigationError
){

this.loading = false;

}

});

Template

<div *ngIf="loading">
  Loading...
</div>

Loading Indicator Flow

flowchart LR

NavigationStart

NavigationStart --> ShowLoader

ShowLoader --> NavigationEnd

NavigationEnd --> HideLoader

Analytics Integration

Router Events are commonly used for analytics.

this.router.events
.pipe(

filter(
event => event instanceof NavigationEnd
)

)
.subscribe(() => {

analyticsService.trackPage();

});

Common integrations

  • Google Analytics
  • Adobe Analytics
  • Azure Application Insights
  • Datadog
  • Dynatrace

Enterprise Banking Example

Application Modules

  • Login
  • Dashboard
  • Accounts
  • Transactions
  • Loans
  • Investments
  • Cards

Routing Events

flowchart TD

NavigationStart

NavigationStart --> Authentication

Authentication --> Resolver

Resolver --> LazyModule

LazyModule --> Dashboard

Dashboard --> Analytics

Dashboard --> PerformanceMonitoring

Benefits

  • Measure navigation time
  • Monitor failures
  • Improve customer experience
  • Track feature usage
  • Debug production issues

Router Event Timeline

timeline

title Angular Router Event Timeline

section Navigation

NavigationStart

RoutesRecognized

section Security

GuardsCheckStart

GuardsCheckEnd

section Data

ResolveStart

ResolveEnd

section Complete

NavigationEnd

Performance Best Practices

Practice Benefit
Filter required events only Better performance
Unsubscribe when needed Prevent memory leaks
Show loaders only for long operations Better UX
Track NavigationEnd for analytics Accurate page tracking
Avoid heavy logic inside event handlers Faster navigation
Log navigation errors Easier troubleshooting

Common Mistakes

Listening to Every Event

Subscribe only to events that your application actually needs.

Forgetting to Unsubscribe

When not using Angular's automatic cleanup (for example, takeUntilDestroyed()), unsubscribe from custom subscriptions to prevent memory leaks.

Heavy Business Logic

Avoid complex calculations inside Router Event handlers.

Delegate work to services.

Ignoring Navigation Errors

Always log and monitor navigation failures.

Showing Loaders for Very Fast Navigations

Only display global loaders when navigation duration justifies it to avoid flickering.

Best Practices

  • Filter events using RxJS filter().
  • Track NavigationEnd for analytics.
  • Use NavigationStart for loading indicators.
  • Handle NavigationError gracefully.
  • Monitor lazy loading events.
  • Keep event handlers lightweight.
  • Centralize routing event logic when possible.
  • Use Angular's lifecycle-aware cleanup mechanisms.

Advantages

Feature Benefit
Navigation Tracking Better monitoring
Performance Metrics Faster optimization
Loading Indicators Better UX
Analytics User insights
Error Monitoring Easier debugging
Enterprise Ready Production monitoring

Top 10 Angular Router Events Interview Questions

1. What are Angular Router Events?

Answer

Router Events are notifications emitted during the Angular routing lifecycle, allowing developers to monitor navigation progress and react to routing changes.

2. Which event starts the navigation process?

Answer

NavigationStart

It is emitted immediately when navigation begins.

3. Which event indicates successful navigation?

Answer

NavigationEnd

It is emitted after the target route has been successfully activated.

4. What is NavigationCancel?

Answer

It indicates that navigation was cancelled, commonly due to a route guard, redirect, or another navigation request.

5. What is NavigationError?

Answer

It is emitted when navigation fails because of an exception, resolver failure, invalid configuration, or another routing error.

6. What are Guard Events?

Answer

Guard Events (GuardsCheckStart and GuardsCheckEnd) indicate when Angular begins and completes evaluating route guards.

7. What are Resolver Events?

Answer

ResolveStart and ResolveEnd indicate when route resolvers begin and finish loading required data.

8. What events support Lazy Loading?

Answer

RouteConfigLoadStart and RouteConfigLoadEnd indicate the beginning and completion of loading lazy route configurations.

9. Why are Router Events important?

Answer

They enable loading indicators, analytics, performance measurement, error handling, and navigation monitoring.

10. What are Router Event best practices?

Answer

  • Filter only required events.
  • Keep handlers lightweight.
  • Track NavigationEnd for analytics.
  • Handle NavigationError.
  • Monitor lazy loading events.
  • Clean up subscriptions when necessary.

Interview Cheat Sheet

Topic Remember
Navigation Start NavigationStart
Navigation Success NavigationEnd
Navigation Cancel NavigationCancel
Navigation Failure NavigationError
Guard Events GuardsCheckStart, GuardsCheckEnd
Resolver Events ResolveStart, ResolveEnd
Lazy Loading RouteConfigLoadStart, RouteConfigLoadEnd
Analytics NavigationEnd
Loading Spinner NavigationStart + NavigationEnd
Best Practice Filter events with RxJS

Summary

Angular Router Events provide complete visibility into the routing lifecycle. Events such as NavigationStart, NavigationEnd, NavigationCancel, NavigationError, ResolveStart, ResolveEnd, GuardsCheckStart, and RouteConfigLoadStart enable developers to build responsive, observable, and production-ready applications. By combining Router Events with analytics, loading indicators, lazy loading, and performance monitoring, Angular applications become more scalable, user-friendly, and easier to troubleshoot.

Key Takeaways

  • ✔ Router Events monitor every stage of navigation.
  • ✔ NavigationStart begins the routing process.
  • ✔ NavigationEnd signals successful navigation.
  • ✔ NavigationCancel and NavigationError help handle failures.
  • ✔ Guard and Resolver events provide visibility into routing decisions and data loading.
  • ✔ Lazy loading emits dedicated start and end events.
  • ✔ Router Events are useful for analytics and performance monitoring.
  • ✔ Keep event handlers lightweight and focused.
  • ✔ Filter events to avoid unnecessary processing.
  • ✔ Router Events are a common Angular interview topic.

Next Article

➡️ 51-Query-Parameters-QA.md