DEV Community

Cover image for NavigationExtras in Angular
Muhammad Awais
Muhammad Awais

Posted on

NavigationExtras in Angular

There are following workarounds of Angular Routing Parameters:

  1. Required Parameters
  2. Optional Parameters
  3. Query Parameters
  4. Navigation Extras

let's discuss 4rth one: Navigation Extras

This new method came after Angular 7.2.0 which represents the extra options used during navigation.

How to send parameters to another component from the current one?

constructor (private router : Router) {}

this.router.navigate(['employee'], { state:{ name:'Muhammad Awais' } })
Enter fullscreen mode Exit fullscreen mode

How to get parameters in the destination routed component?

constructor (private router : Router) {
    this.router.getCurrentNavigation().extras.state.name;
}

// This works only in the constructor, it will not work on ngOnInit
Enter fullscreen mode Exit fullscreen mode

Top comments (0)