Forward state with navigateByUrl in Angular

Question

i want to pass some data, when changing the view with navigateByUrl like

this.router.navigateByUrl(url, {state: {hello: "world"}});

In the next view i want to simply log the hello attribute like

constructor(public router: Router) { }

  ngOnInit(): void {
    console.log(this.router.getCurrentNavigation().extras.state.hello)
  }

When I now do it this way, i get an error:

ERROR TypeError: Cannot read property 'extras' of null
    at ProfileContactViewComponent.ngOnInit

Am i doing this correctly or is there a better way to pass the data between the views? Thanks for your help.

Sayooj V R · Accepted Answer · 2020-03-30 13:53:36Z

2

Try like this

Send :

this.router.navigate([url], { state: { hello: 'world' } });

Recieve:

constructor(private router: Router) {
  console.log(this.router.getCurrentNavigation().extras.state.hello); // should log out 'hello'
}

For better understanding read the documentation. PFB the link to documentation https://angular.io/api/router/NavigationExtras#state

answered Mar 30, 2020 at 13:53

Sayooj V R

2,3652 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Haseena P A · Accepted Answer · 2021-10-26 12:52:23Z

2

If you want to access inside ngOninit, use the location getState function which is available from angular 8+

import { Location } from '@angular/common';
 
export class AComponent
{
  
 
  constructor(private location:Location){
  }
 
  ngOnInit() {
    console.log(this.location.getState());
  }
}

Reference Link : https://www.tektutorialshub.com/angular/angular-pass-data-to-route/

answered Oct 26, 2021 at 12:52

Haseena P A

17.4k5 gold badges21 silver badges35 bronze badges

Comments

MoxJet · Accepted Answer · 2025-06-02 19:56:27Z

0

For me, this.router.getCurrentNavigation() didn't work. Instead I used something like

history.state.hello

in the page navigated to and it worked

answered Jun 2 at 19:56

MoxJet

291 silver badge3 bronze badges

Collectives™ on Stack Overflow

Forward state with navigateByUrl in Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related