RouterListener

Event-driven listener for Angular Router's navigation lifecycle and events. Subscribe to specific router events with type-safe handlers.

Usage

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

@Component({
  template: `<router-outlet />`,
})
export class App {
  constructor() {
    routerListener('navigationstart', event => {
      console.log('Navigation started:', event.url); 
    });
  }
}

Parameters

Parameter	Type	Description
event	RouterEventType | readonly RouterEventType[]	Router event name(s) in lowercase. Can be a single event or an array of events (see Supported Events below)
handler	(event: EventType) => void	Type-safe handler function. For single event, receives the specific event type. For array of events, receives a union type of all events
options	RouterListenerOptions	Optional configuration (see Options below)

Options

The RouterListenerOptions extends WithInjector:

Option	Type	Default	Description
once	boolean	false	If true, automatically unsubscribe after the first event
injector	Injector	-	Optional injector for DI context

Return Value

Returns a RouterListenerRef object with the following method:

Property	Type	Description
destroy	() => void	Manually unsubscribe from router events

Supported Events

All Angular Router events are supported. Event names are in lowercase (camelCase):

Event Type	Event Class	Description
navigationstart	NavigationStart	Occurs when navigation starts
navigationend	NavigationEnd	Occurs when navigation ends successfully
navigationcancel	NavigationCancel	Occurs when navigation is cancelled
navigationerror	NavigationError	Occurs when navigation fails
navigationskipped	NavigationSkipped	Occurs when navigation is skipped
routesrecognized	RoutesRecognized	Occurs when routes are recognized
guardscheckstart	GuardsCheckStart	Occurs at the start of guard phase
guardscheckend	GuardsCheckEnd	Occurs at the end of guard phase
resolvestart	ResolveStart	Occurs at the start of resolve phase
resolveend	ResolveEnd	Occurs at the end of resolve phase
routeconfigloadstart	RouteConfigLoadStart	Occurs before lazy loading route configuration
routeconfigloadend	RouteConfigLoadEnd	Occurs after lazy-loaded route configuration loads
childactivationstart	ChildActivationStart	Occurs at the start of child route activation
childactivationend	ChildActivationEnd	Occurs at the end of child route activation
activationstart	ActivationStart	Occurs at the start of route activation
activationend	ActivationEnd	Occurs at the end of route activation
scroll	Scroll	Occurs during scrolling

Examples

Loading indicator

import { Component, signal } from '@angular/core';
import { routerListener } from '@signality/core';

@Component({
  selector: 'app-root',
  template: `
    @if (isLoading()) {
      <div class="loading-bar">Loading...</div>
    }
    <router-outlet />
  `,
})
export class App {
  readonly isLoading = signal(false);

  constructor() {
    routerListener('navigationstart', () => {
      this.isLoading.set(true);
    });

    // Using array of events
    routerListener(['navigationend', 'navigationerror'], () => {
      this.isLoading.set(false);
    });
  }
}

Analytics tracking

import { Component, inject } from '@angular/core';
import { routerListener } from '@signality/core';
import { AnalyticsService } from './analytics.service';

@Component({ /* ... */ })
export class App {
  private analytics = inject(AnalyticsService);

  constructor() {
    routerListener('navigationend', event => {
      this.analytics.trackPageView(event.urlAfterRedirects); 
    });
  }
}

Error handling

import { Component, signal } from '@angular/core';
import { routerListener } from '@signality/core';

@Component({
  template: `
    @if (error(); as error) {
      <div class="error-banner">
        <p>Navigation error: {{ error.message }}</p>
        <button (click)="dismissError()">Dismiss</button>
      </div>
    }
    <router-outlet />
  `,
})
export class App {
  readonly error = signal<Error | null>(null);

  constructor() {
    routerListener('navigationerror', event => {
      this.error.set(event.error); 
    });
  }

  dismissError() {
    this.error.set(null);
  }
}

Guard rejection tracking

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

@Component({ /* ... */ })
export class App {
  constructor() {
    routerListener('navigationcancel', event => {
      if (event.code === NavigationCancellationCode.GuardRejected) {
        console.warn('Navigation cancelled by guard:', event.reason);
      }
    });
  }
}

Route resolution tracking

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

@Component({ /* ... */ })
export class App {
  constructor() {
    routerListener('resolvestart', event => {
      console.log('Resolving data for:', event.urlAfterRedirects);
    });

    routerListener('resolveend', event => {
      console.log('Data resolved for:', event.urlAfterRedirects);
    });
  }
}

One-time listener

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

@Component({ /* ... */ })
export class App {
  constructor() {
    // Automatically unsubscribe after first navigation
    routerListener('navigationstart', event => {
      console.log('First navigation:', event.url);
    }, { once: true }); 
  }
}

Type Definitions

type RouterEventType =
  | 'navigationstart'
  | 'navigationend'
  | 'navigationcancel'
  | 'navigationerror'
  | 'navigationskipped'
  | 'routesrecognized'
  | 'guardscheckstart'
  | 'guardscheckend'
  | 'resolvestart'
  | 'resolveend'
  | 'routeconfigloadstart'
  | 'routeconfigloadend'
  | 'childactivationstart'
  | 'childactivationend'
  | 'activationstart'
  | 'activationend'
  | 'scroll';

interface RouterListenerOptions extends WithInjector {
  /** If true, automatically unsubscribe after the first event */
  readonly once?: boolean;
}

interface RouterListenerRef {
  /** Manually unsubscribe from router events */
  readonly destroy: () => void;
}

// Overloads for type-safe handlers (single event)
function routerListener(
  event: 'navigationstart',
  handler: (event: NavigationStart) => void,
  options?: RouterListenerOptions
): RouterListenerRef;
// ... (overloads for all event types)

// Overload for multiple events with union type
function routerListener<T extends readonly [RouterEventType, ...RouterEventType[]]>(
  events: T,
  handler: (event: RouterEventTypeArrayToUnion<T>) => void,
  options?: RouterListenerOptions
): RouterListenerRef;

Related

• params — Access route parameters
• queryParams — Access query parameters
• fragment — Access URL fragment
• url — Access current URL
• routeData — Access route data

Edit this page on GitHub Last updated: Mar 19, 2026, 23:28:23

PreviousRouteDataNextTitle