Router

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

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#

Observable that provides all routing events.

events: Observable<Event>

routerState#

Contains current router state.

routerState: RouterState

errorHandler#

Error handler that is invoked when a navigation errors.

errorHandler: ErrorHandler

malformedUriErrorHandler#

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.

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

Indicates if at least one navigation happened.

navigated: boolean

urlHandlingStrategy#

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

urlHandlingStrategy: UrlHandlingStrategy

routeReuseStrategy#

-

routeReuseStrategy: RouteReuseStrategy

onSameUrlNavigation#

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

onSameUrlNavigation: 'reload' | 'ignore'

paramsInheritanceStrategy#

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

paramsInheritanceStrategy: 'emptyOnly' | 'always'

urlUpdateStrategy#

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

urlUpdateStrategy: 'deferred' | 'eager'

config#

Routes configuration.

config: Routes

url#

The current url.

url: string

Methods

initialNavigation()#

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

initialNavigation(): void

setUpLocationChangeListener()#

Sets up the location change listener.

setUpLocationChangeListener(): void

resetConfig()#

Resets the configuration used for navigation and generating links.

resetConfig(config: Routes): void

dispose()#

Disposes of the router.

dispose(): void

createUrlTree()#

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

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

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

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

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 based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute.

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

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()#

Serializes a UrlTree into a string.

serializeUrl(url: UrlTree): string

parseUrl()#

Parses a string into a UrlTree.

parseUrl(url: string): UrlTree

isActive()#

Returns whether the url is activated.

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