Options that modify the Router URL. Supply an object containing any of these properties to a Router navigation function to control how the target URL should be constructed.

interface UrlCreationOptions {
  relativeTo?: ActivatedRoute | null
  queryParams?: Params | null
  fragment?: string
  queryParamsHandling?: QueryParamsHandling | null
  preserveFragment?: boolean

Child interfaces

See also


Property Description
relativeTo?: ActivatedRoute | null

Specifies a root URI to use for relative navigation.

For example, consider the following route configuration where the parent route has two children.

  path: 'parent',
  component: ParentComponent,
  children: [{
    path: 'list',
    component: ListComponent
    path: 'child',
    component: ChildComponent

The following go() function navigates to the list route by interpreting the destination URI as relative to the activated child route

 class ChildComponent {
   constructor(private router: Router, private route: ActivatedRoute) {}

   go() {
     this.router.navigate(['../list'], { relativeTo: this.route });

A value of null or undefined indicates that the navigation commands should be applied relative to the root.

queryParams?: Params | null

Sets query parameters to the URL.

// Navigate to /results?page=1
this.router.navigate(['/results'], { queryParams: { page: 1 } });
fragment?: string

Sets the hash fragment for the URL.

// Navigate to /results#top
this.router.navigate(['/results'], { fragment: 'top' });
queryParamsHandling?: QueryParamsHandling | null

How to handle query parameters in the router link for the next navigation. One of:

  • preserve : Preserve current parameters.
  • merge : Merge new with current parameters.

The "preserve" option discards any new query params:

// from /view1?page=1 to/view2?page=1
this.router.navigate(['/view2'], { queryParams: { page: 2 },  queryParamsHandling: "preserve"

The "merge" option appends new query params to the params from the current URL:

// from /view1?page=1 to/view2?page=1&otherKey=2
this.router.navigate(['/view2'], { queryParams: { otherKey: 2 },  queryParamsHandling: "merge"

In case of a key collision between current parameters and those in the queryParams object, the new value is used.

preserveFragment?: boolean

When true, preserves the URL fragment for the next navigation

// Preserve fragment from /results#top to /view#top
this.router.navigate(['/view'], { preserveFragment: true });

© 2010–2022 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.