DEV Community

Cover image for NavigationExtras in Angular
Muhammad Awais
Muhammad Awais

Posted on

7

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)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay