Help Angular by taking a 1 minute survey!Go to surveyHome

NavigationExtras

Options that modify the navigation strategy.

      
      interface NavigationExtras {
  relativeTo?: ActivatedRoute | null
  queryParams?: Params | null
  fragment?: string
  preserveQueryParams?: boolean
  queryParamsHandling?: QueryParamsHandling | null
  preserveFragment?: boolean
  skipLocationChange?: boolean
  replaceUrl?: boolean
  state?: {...}
}
    

Properties

Property Description
relativeTo?: ActivatedRoute | null

Enables relative navigation from the current ActivatedRoute.

Configuration:

[{ path: 'parent', component: ParentComponent, children: [{ path: 'list', component: ListComponent },{ path: 'child', component: ChildComponent }] }]
      
      [{
  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 }); } }
      
      @Component({...})
class ChildComponent {
  constructor(private router: Router, private route: ActivatedRoute) {}

  go() {
    this.router.navigate(['../list'], { relativeTo: this.route });
  }
}
    
queryParams?: Params | null

Sets query parameters to the URL.

// Navigate to /results?page=1 this.router.navigate(['/results'], { queryParams: { page: 1 } });
      
      // 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' });
      
      // Navigate to /results#top
this.router.navigate(['/results'], { fragment: 'top' });
    
preserveQueryParams?: boolean

DEPRECATED: Use queryParamsHandling instead to preserve query parameters for the next navigation.

// Preserve query params from /results?page=1 to /view?page=1 this.router.navigate(['/view'], { preserveQueryParams: true });
      
      // Preserve query params from /results?page=1 to /view?page=1
this.router.navigate(['/view'], { preserveQueryParams: true });
    
queryParamsHandling?: QueryParamsHandling | null

Configuration strategy for how to handle query parameters for the next navigation.

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

Preserves the fragment for the next navigation

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

Navigates without pushing a new state into history.

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

Navigates while replacing the current state in history.

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

State passed to any navigation. 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.