What are Router Events in Angular?

During each navigation, the Router emits navigation events through the Router.events property allowing you to track the lifecycle of the route.

The sequence of router events is as below:

NavigationStart

An event triggered when a navigation starts

      
      
class NavigationStart extends RouterEvent {
  constructor(id: number, url: string, navigationTrigger: "imperative" | "popstate" | "hashchange" = 'imperative', restoredState: { [k: string]: any; navigationId: number; } = null)
  navigationTrigger?: 'imperative' | 'popstate' | 'hashchange'
  restoredState?: {...}
  override
  toString(): string

  // inherited from router/RouterEvent
  constructor(id: number, url: string)
  id: number
  url: string
}

    

RouteConfigLoadStart

An event triggered before lazy loading a route configuration.

      
      
class RouteConfigLoadStart {
  constructor(route: Route)
  route: Route
  toString(): string
}

    

RouteConfigLoadEnd

An event triggered when a route has been lazy loaded.

      
      
class RouteConfigLoadEnd {
  constructor(route: Route)
  route: Route
  toString(): string
}

    

RoutesRecognized

An event triggered when routes are recognized.

      
      
class RoutesRecognized extends RouterEvent {
  constructor(id: number, url: string, urlAfterRedirects: string, state: RouterStateSnapshot)
  urlAfterRedirects: string
  state: RouterStateSnapshot
  override
  toString(): string

  // inherited from router/RouterEvent
  constructor(id: number, url: string)
  id: number
  url: string
}

    

GuardsCheckStart

An event triggered at the start of the Guard phase of routing.

      
      
class GuardsCheckStart extends RouterEvent {
  constructor(id: number, url: string, urlAfterRedirects: string, state: RouterStateSnapshot)
  urlAfterRedirects: string
  state: RouterStateSnapshot
  override
  toString(): string

  // inherited from router/RouterEvent
  constructor(id: number, url: string)
  id: number
  url: string
}

    

ChildActivationStart

An event triggered at the start of the child-activation part of the Resolve phase of routing

      
      
class ChildActivationStart {
  constructor(snapshot: ActivatedRouteSnapshot)
  snapshot: ActivatedRouteSnapshot
  toString(): string
}

    

ActivationStart

An event triggered at the start of the activation part of the Resolve phase of routing.

      
      
class ActivationStart {
  constructor(snapshot: ActivatedRouteSnapshot)
  snapshot: ActivatedRouteSnapshot
  toString(): string
}

    

GuardsCheckEnd

An event triggered at the end of the Guard phase of routing.

      
      
class GuardsCheckEnd extends RouterEvent {
  constructor(id: number, url: string, urlAfterRedirects: string, state: RouterStateSnapshot, shouldActivate: boolean)
  urlAfterRedirects: string
  state: RouterStateSnapshot
  shouldActivate: boolean
  override
  toString(): string

  // inherited from router/RouterEvent
  constructor(id: number, url: string)
  id: number
  url: string
}

    

ResolveStart

An event triggered at the start of the Resolve phase of routing.

      
      
class ResolveStart extends RouterEvent {
  constructor(id: number, url: string, urlAfterRedirects: string, state: RouterStateSnapshot)
  urlAfterRedirects: string
  state: RouterStateSnapshot
  override
  toString(): string

  // inherited from router/RouterEvent
  constructor(id: number, url: string)
  id: number
  url: string
}

    

ResolveEnd

An event triggered at the end of the Resolve phase of routing

      
class ResolveEnd extends RouterEvent {
  constructor(id: number, url: string, urlAfterRedirects: string, state: RouterStateSnapshot)
  urlAfterRedirects: string
  state: RouterStateSnapshot
  override
  toString(): string

  // inherited from router/RouterEvent
  constructor(id: number, url: string)
  id: number
  url: string
}
    

ActivationEnd

An event triggered at the end of the activation part of the Resolve phase of routing.

      
class ActivationEnd {
  constructor(snapshot: ActivatedRouteSnapshot)
  snapshot: ActivatedRouteSnapshot
  toString(): string
}
    

ChildActivationEnd

An event triggered at the end of the child-activation part of the Resolve phase of routing.

      
class ChildActivationEnd {
  constructor(snapshot: ActivatedRouteSnapshot)
  snapshot: ActivatedRouteSnapshot
  toString(): string
}
    

NavigationEnd

An event triggered when a navigation ends successfully.

      
class NavigationEnd extends RouterEvent {
  constructor(id: number, url: string, urlAfterRedirects: string)
  urlAfterRedirects: string
  override
  toString(): string

  // inherited from router/RouterEvent
  constructor(id: number, url: string)
  id: number
  url: string
}
    

NavigationCancel

An event triggered when a navigation is canceled, directly or indirectly. This can happen for several reasons including when a route guard returns false or initiates a redirect by returning a UrlTree.

      
class NavigationCancel extends RouterEvent {
  constructor(id: number, url: string, reason: string)
  reason: string
  override
  toString(): string

  // inherited from router/RouterEvent
  constructor(id: number, url: string)
  id: number
  url: string
}
    

NavigationError

An event triggered when a navigation fails due to an unexpected error.

      
class NavigationError extends RouterEvent {
  constructor(id: number, url: string, error: any)
  error: any
  override
  toString(): string

  // inherited from router/RouterEvent
  constructor(id: number, url: string)
  id: number
  url: string
}
    

Scroll

An event triggered by scrolling.

      
class Scroll {
  constructor(routerEvent: NavigationEnd, position: [number, number], anchor: string)
  routerEvent: NavigationEnd
  position: [number, number] | null
  anchor: string | null
  toString(): string
}