Router

This is the documentation for Angular 6.
You can switch to the latest version Angular 9.

Provides the navigation and url manipulation capabilities.

Example

Imperative navigation:

export class AppComponent {
  constructor(private router: Router) {
  }

  navigateToHome() {
    this.router.navigate('/home');
  }
}

Interface

Properties

events#

events: Observable<Event>

Observable that provides all routing events.

routerState#

routerState: RouterState

Contains current router state.

errorHandler#

errorHandler: ErrorHandler

Error handler that is invoked when a navigation errors.

malformedUriErrorHandler#

malformedUriErrorHandler: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree

Malformed uri error handler is invoked when Router.parseUrl(url) throws an error due to containing an invalid character. The most common case would be a % sign that's not encoded and is not part of a percent encoded sequence.

navigated: boolean

Indicates if at least one navigation happened.

urlHandlingStrategy#

urlHandlingStrategy: UrlHandlingStrategy

Extracts and merges URLs. Used for AngularJS to Angular migrations.

routeReuseStrategy#

routeReuseStrategy: RouteReuseStrategy

-

onSameUrlNavigation#

onSameUrlNavigation: 'reload' | 'ignore'

Define what the router should do if it receives a navigation request to the current URL.

paramsInheritanceStrategy#

paramsInheritanceStrategy: 'emptyOnly' | 'always'

Defines how the router merges params, data and resolved data from parent to child routes. More info in the configuration section.

urlUpdateStrategy#

urlUpdateStrategy: 'deferred' | 'eager'

Defines when the router updates the browser URL. More info in the configuration section.

config#

config: Routes

Routes configuration.

url#

url: string

The current url.

Methods

initialNavigation()#

initialNavigation(): void

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

setUpLocationChangeListener()#

setUpLocationChangeListener(): void

Sets up the location change listener.

resetConfig()#

resetConfig(config: Routes): void

Resets the configuration used for navigation and generating links.

dispose()#

dispose(): void

Disposes of the router.

createUrlTree()#

createUrlTree(commands: any[], navigationExtras: NavigationExtras = {}): UrlTree

Applies an array of commands to the current url tree and creates a new url tree.

navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>

Navigate based on the provided url. This navigation is always absolute.

Returns a Promise that:

  • resolves to true when navigation succeeds,
  • resolves to false when navigation fails,
  • is rejected when an error happens.

Example

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

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

Since navigateByUrl() takes an absolute URL as the first parameter, it will not apply any delta to the current URL and ignores any properties in the second parameter (the NavigationExtras that would change the provided URL.

navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>

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

Returns a Promise that:

  • resolves to true when navigation succeeds,
  • resolves to false when navigation fails,
  • is rejected when an error happens.

Example

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

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

The first parameter of navigate() is a delta to be applied to the current URL or the one provided in the relativeTo property of the second parameter (the NavigationExtras).

serializeUrl()#

serializeUrl(url: UrlTree): string

Serializes a UrlTree into a string.

parseUrl()#

parseUrl(url: string): UrlTree

Parses a string into a UrlTree.

isActive()#

isActive(url: string | UrlTree, exact: boolean): boolean

Returns whether the url is activated.