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 or initiates a redirect by returning a false 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
}

What are Router Events in Angular?

Too Long; Didn't Read

Company Mentioned

@ilyoskhuja

RELATED STORIES