NavigationExtras

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

Represents the extra options used during navigation.

Properties

fragment#

Sets the hash fragment for the URL.

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

preserveFragment#

Preserves the fragment for the next navigation.

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

preserveQueryParams#

Preserves the query parameters for the next navigation.

Deprecated, use queryParamsHandling instead.

preserveQueryParams?: boolean

queryParams#

Sets query parameters to the URL.

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

queryParamsHandling#

Config strategy to handle the query parameters for the next navigation.

queryParamsHandling?: QueryParamsHandling|null
// from /results?page=1 to /view?page=1&page=2
this.router.navigate(['/view'], { queryParams: { page: 2 },  queryParamsHandling: "merge" });

relativeTo#

Enables relative navigation from the current ActivatedRoute.

relativeTo?: ActivatedRoute|null

Configuration:

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

Navigate to list route from child route:

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

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

replaceUrl#

Navigates while replacing the current state in history.

replaceUrl?: boolean
// Navigate to /view
this.router.navigate(['/view'], { replaceUrl: true });

skipLocationChange#

Navigates without pushing a new state into history.

skipLocationChange?: boolean
// Navigate silently to /view
this.router.navigate(['/view'], { skipLocationChange: true });

state#

State passed to any navigation.

state?: {[k: string]: any}

This value will be accessible through the extras object returned from router.getCurrentNavigation() while a navigation is executing. Once a navigation completes, this value will be written to history.state when the location.go or location.replaceState method is called before activating of this route. Note that history.state will not pass an object equality test because the navigationId will be added to the state before being written.

While history.state can accept any type of value, because the router adds the navigationId on each navigation, the state must always be an object.