Move forward state using navigateByUrl in Angular

Question

Move forward state using navigateByUrl in Angular

I am looking to send data when changing the view using navigateByUrl like this:

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

Once in the next view, my goal is to simply log the hello attribute like so:

constructor(public router: Router) { }

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

However, when I attempt to implement it this way, I encounter an error:

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

Is there a better method for passing data between views? Any guidance would be greatly appreciated. Thank you.

angular typescript angular-routing angular-router angular-routerlink

Answer 1

Answer №1

Here is a helpful tip for you:

When sending data, use the following code:

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

When receiving data, utilize this code:

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

If you want more information, make sure to check out the documentation provided at the following link: https://angular.io/api/router/NavigationExtras#state

Answer 2

Here is a helpful tip for you:

When sending data, use the following code:

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

When receiving data, utilize this code:

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

If you want more information, make sure to check out the documentation provided at the following link: https://angular.io/api/router/NavigationExtras#state

Answer 3

Answer №2

If you need to access data inside ngOnInit, make use of the location getState method provided in Angular version 8 and above.

import { Location } from '@angular/common';

export class NewComponent {
  
  constructor(private location: Location) {
  }
 
  ngOnInit() {
    console.log(this.location.getState());
  }
}

For more information, check out this link:

Answer 4

If you need to access data inside ngOnInit, make use of the location getState method provided in Angular version 8 and above.

import { Location } from '@angular/common';

export class NewComponent {
  
  constructor(private location: Location) {
  }
 
  ngOnInit() {
    console.log(this.location.getState());
  }
}

For more information, check out this link:

Move forward state using navigateByUrl in Angular

Answer №1

Answer №2

Similar questions

How to Customize the Select Dropdown in Angular Material 2

Using Angular: Embed environment.ts into index.html as a standalone JavaScript file

Using Angular service worker to pre-fetch video files

Creating a unique tooltip component for ag-grid with the use of Material tooltips

Is there a way to refresh an input field in Angular when the model hasn't necessarily been modified, but the value in the input field has?

My Nextjs project is encountering deployment issues with both Netlify and Heroku

Introducing a delay in an observable causes incomplete data to be received in Angular using rxjs

What is the procedure for including a js file in typescript?

How can I retrieve the `checked` state of an input in Vue 3 using Typescript?

Exploring the various form types supported by 'react-hook-form'

Retrieve a specific value from the NGXS state by providing a parameter

Which is the better choice for simply invoking a service method - subscribe or toPromise?

Update a specific element within Angular framework

What is the best way to include a background image in an Angular selector?

Applying background color within an *ngFor loop

javascript assign array to object key

Angular 4 and Webpack: Compilation Error

What is the syntax for creating ES6 arrow functions in TypeScript?

When I utilize a component to create forms, the React component does not refresh itself

The value of 'this.selectedNodes' does not support iteration and is causing a