@angular/router

Router

Class

stable

A service that facilitates navigation among views and URL manipulation capabilities. This service is provided in the root scope and configured with provideRouter.

Route provideRouter Routing and Navigation Guide

API

    
      class Router {  readonly events: Observable<Event>;  readonly routerState: RouterState;  navigated: boolean;  routeReuseStrategy: RouteReuseStrategy;  onSameUrlNavigation: OnSameUrlNavigation;  config: Routes;  readonly componentInputBindingEnabled: boolean;  readonly currentNavigation: Signal<Navigation | null>;  initialNavigation(): void;  setUpLocationChangeListener(): void;  readonly url: string;  getCurrentNavigation(): Navigation | null;  readonly lastSuccessfulNavigation: Signal<Navigation | null>;  resetConfig(config: Routes): void;  dispose(): void;  createUrlTree(commands: readonly any[], navigationExtras?: UrlCreationOptions): UrlTree;  navigateByUrl(url: string | UrlTree, extras?: NavigationBehaviorOptions): Promise<boolean>;  navigate(commands: readonly any[], extras?: NavigationExtras): Promise<boolean>;  serializeUrl(url: UrlTree): string;  parseUrl(url: string): UrlTree;  isActive(url: string | UrlTree, exact: boolean): boolean;  isActive(url: string | UrlTree, matchOptions: Partial<IsActiveMatchOptions>): boolean;  isActive(url: string | UrlTree, matchOptions: boolean | IsActiveMatchOptions): boolean;
}

events

Observable<Event>

An event stream for routing events.

routerState

RouterState

The current state of routing in this NgModule.

navigated

boolean

True if at least one navigation event has occurred, false otherwise.

routeReuseStrategy

RouteReuseStrategy

@deprecated

Configure using providers instead: {provide: RouteReuseStrategy, useClass: MyStrategy}.

A strategy for re-using routes.

onSameUrlNavigation

OnSameUrlNavigation

@deprecated

Configure this through provideRouter or RouterModule.forRoot instead.

How to handle a navigation request to the current URL.

componentInputBindingEnabled

boolean

Indicates whether the application has opted in to binding Router data to component inputs.

This option is enabled by the withComponentInputBinding feature of provideRouter or bindToComponentInputs in the ExtraOptions of RouterModule.forRoot.

currentNavigation

Signal<Navigation | null>

Signal of the current Navigation object when the router is navigating, and null when idle.

Note: The current navigation becomes to null after the NavigationEnd event is emitted.

initialNavigation

void

Sets up the location change listener and performs the initial navigation.

@returnsvoid

Sets up the location change listener. This listener detects navigations triggered from outside the Router (the browser back/forward buttons, for example) and schedules a corresponding Router navigation so that the correct events, guards, etc. are triggered.

@returnsvoid

url

string

The current URL.

getCurrentNavigation

Navigation | null

Returns the current Navigation object when the router is navigating, and null when idle.

@deprecated

Use the currentNavigation signal instead.

@returnsNavigation | null

lastSuccessfulNavigation

Signal<Navigation | null>

The Navigation object of the most recent navigation to succeed and null if there has not been a successful navigation yet.

resetConfig

void

Resets the route configuration used for navigation and generating links.

@paramconfigRoutes

The route array for the new configuration.

@returnsvoid

Usage notes

router.resetConfig([
 { path: 'team/:id', component: TeamCmp, children: [
   { path: 'simple', component: SimpleCmp },
   { path: 'user/:name', component: UserCmp }
 ]}
]);

dispose

void

Disposes of the router.

@returnsvoid

createUrlTree

UrlTree

Appends URL segments to the current URL tree to create a new URL tree.

@paramcommandsreadonly any[]

An array of URL fragments with which to construct the new URL tree. If the path is static, can be the literal URL string. For a dynamic path, pass an array of path segments, followed by the parameters for each segment. The fragments are applied to the current URL tree or the one provided in the relativeTo property of the options object, if supplied.

@paramnavigationExtrasUrlCreationOptions

Options that control the navigation strategy.

@returnsUrlTree

The new URL tree.

Usage notes

// create /team/33/user/11
router.createUrlTree(['/team', 33, 'user', 11]);

// create /team/33;expand=true/user/11
router.createUrlTree(['/team', 33, {expand: true}, 'user', 11]);

// you can collapse static segments like this (this works only with the first passed-in value):
router.createUrlTree(['/team/33/user', userId]);

// If the first segment can contain slashes, and you do not want the router to split it,
// you can do the following:
router.createUrlTree([{segmentPath: '/one/two'}]);

// create /team/33/(user/11//right:chat)
router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: 'chat'}}]);

// remove the right secondary node
router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: null}}]);

// assuming the current url is `/team/33/user/11` and the route points to `user/11`

// navigate to /team/33/user/11/details
router.createUrlTree(['details'], {relativeTo: route});

// navigate to /team/33/user/22
router.createUrlTree(['../22'], {relativeTo: route});

// navigate to /team/44/user/22
router.createUrlTree(['../../team/44/user/22'], {relativeTo: route});

Note that a value of null or undefined for relativeTo indicates that the tree should be created relative to the root.

navigateByUrl

Promise<boolean>

Navigates to a view using an absolute route path.

@paramurlstring | UrlTree

An absolute path for a defined route. The function does not apply any delta to the current URL.

@paramextrasNavigationBehaviorOptions

An object containing properties that modify the navigation strategy.

@returnsPromise<boolean>

A Promise that resolves to 'true' when navigation succeeds, to 'false' when navigation fails, or is rejected on error.

Usage notes

The following calls request navigation to an absolute path.

router.navigateByUrl("/team/33/user/11");

// Navigate without updating the URL
router.navigateByUrl("/team/33/user/11", { skipLocationChange: true });

navigate

Promise<boolean>

Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute.

@paramcommandsreadonly any[]

An array of URL fragments with which to construct the target URL. If the path is static, can be the literal URL string. For a dynamic path, pass an array of path segments, followed by the parameters for each segment. The fragments are applied to the current URL or the one provided in the relativeTo property of the options object, if supplied.

@paramextrasNavigationExtras

An options object that determines how the URL should be constructed or interpreted.

@returnsPromise<boolean>

A Promise that resolves to true when navigation succeeds, or false when navigation fails. The Promise is rejected when an error occurs if resolveNavigationPromiseOnError is not true.

Usage notes

The following calls request navigation to a dynamic route path relative to the current URL.

router.navigate(['team', 33, 'user', 11], {relativeTo: route});

// Navigate without updating the URL, overriding the default behavior
router.navigate(['team', 33, 'user', 11], {relativeTo: route, skipLocationChange: true});

serializeUrl

string

Serializes a UrlTree into a string

@paramurlUrlTree

@returnsstring

parseUrl

UrlTree

Parses a string into a UrlTree

@paramurlstring

@returnsUrlTree

isActive

3 overloads

Returns whether the url is activated.

@deprecated

Use IsActiveMatchOptions instead.

The equivalent IsActiveMatchOptions for true is {paths: 'exact', queryParams: 'exact', fragment: 'ignored', matrixParams: 'ignored'}.
The equivalent for false is {paths: 'subset', queryParams: 'subset', fragment: 'ignored', matrixParams: 'ignored'}.

@paramurlstring | UrlTree

@paramexactboolean

@returnsboolean

@deprecated

Use the isActive function instead.

@paramurlstring | UrlTree

@parammatchOptionsPartial<IsActiveMatchOptions>

@returnsboolean

@paramurlstring | UrlTree

@parammatchOptionsboolean | IsActiveMatchOptions

@returnsboolean

Description

A service that facilitates navigation among views and URL manipulation capabilities. This service is provided in the root scope and configured with provideRouter.

Exported by

RouterModule

Router

On this page

API

events

routerState

navigated

routeReuseStrategy

onSameUrlNavigation

config

componentInputBindingEnabled

currentNavigation

initialNavigation

setUpLocationChangeListener

url

getCurrentNavigation

lastSuccessfulNavigation

resetConfig

dispose

createUrlTree

navigateByUrl

navigate

serializeUrl

parseUrl

isActive

Description

Exported by

Social Media

Community

Resources

Community translations