349

Is there anyway to send data as parameter with router.navigate? I mean, something like this example, as you can see the route has a data parameter, but doing this it's not working:

this.router.navigate(["heroes"], {some-data: "othrData"})

because some-data is not a valid parameter. How can I do that? I don't want to send the parameter with queryParams.

4

9 Answers 9

840

There is a lot of confusion on this topic because there are so many different ways to do it.

Here are the appropriate types used in the following screen shots:

private route: ActivatedRoute
private router: Router

1) Required Routing Parameters:

enter image description here

2) Route Optional Parameters:

enter image description here

3) Route Query Parameters:

enter image description here

4) You can use a service to pass data from one component to another without using route parameters at all.

For an example see: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

I have a plunker of this here: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

26
  • 4
    thank you for your answer! What is the difference between the 2) and the 3)? Because both end up adding "?parameter=" in the URL. Could you give me an example for the 4)? I can't figure out how to do it.
    – Motomine
    Jul 1, 2017 at 22:38
  • I updated by answer to show the different URLs and to provide a link to a blog post and plunker on how to pass data with a service. The URL is different with optional and query parameters as shown above. Plus query parameters can be retained across routes.
    – DeborahK
    Jul 1, 2017 at 22:50
  • 8
    I also have a Pluralsight course on routing that covers all of this: app.pluralsight.com/library/courses/angular-routing/… You can sign up for a free week if you are interested in more information.
    – DeborahK
    Jul 1, 2017 at 22:51
  • 3
    The data is only "shared" within the executing application. If the user refreshes the page, the entire application is reloaded from the server, so no prior state is retained in the application. Thinking about it in terms of a normal application, when a user refreshes it is like closing and reopening the application. If you need to retain state after a refresh, then you will need to store it somewhere such as local storage or on the server.
    – DeborahK
    May 2, 2018 at 16:42
  • 3
    Just a small hint: route type is ActivatedRoute, not Router. May 18, 2018 at 10:01
452

There is a new method what came with Angular 7.2.0

https://angular.io/api/router/NavigationExtras#state

Send:

    this.router.navigate(['action-selection'], { state: { example: 'bar' } });

Receive:

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

You can find some additional info here:

https://github.com/angular/angular/pull/27198

The link above contains this example which can be useful: https://stackblitz.com/edit/angular-bupuzn

14
  • 35
    This is the correct answer given the new features in Angular 7.
    – Randy
    Feb 5, 2019 at 2:35
  • 4
    With this approach, how would I handle a browser refresh by the user? In that case the data in the navigation extras seems to go away, so there is no chance to use it again on refresh.
    – tobi_b
    Feb 6, 2019 at 9:32
  • 9
    Yep that is why you only can get the data from the this.router.getCurrentNavigation() in the constructor. If you need it elsewhere like inside ngOnInit() you can access the data trough "history.state". From the documentation: "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." Apr 1, 2019 at 7:16
  • 35
    Also make sure you don't try to recieve an extras object in ngOnInit() as this.router.getCurrentNavigation().extras
    – hastrb
    Apr 15, 2019 at 9:41
  • 3
    @KinleyChristian Check out this answer, if you have further questions let me know! stackoverflow.com/a/54891361/4222504 Jun 7, 2021 at 6:03
69

Latest version of angular (7.2 +) now has the option to pass additional information using NavigationExtras.

Home component

import {
  Router,
  NavigationExtras
} from '@angular/router';
const navigationExtras: NavigationExtras = {
  state: {
    transd: 'TRANS001',
    workQueue: false,
    services: 10,
    code: '003'
  }
};
this.router.navigate(['newComponent'], navigationExtras);

newComponent

test: string;
constructor(private router: Router) {
  const navigation = this.router.getCurrentNavigation();
  const state = navigation.extras.state as {
    transId: string,
    workQueue: boolean,
    services: number,
    code: string
  };
  this.test = "Transaction Key:" + state.transId + "<br /> Configured:" + state.workQueue + "<br /> Services:" + state.services + "<br /> Code: " + state.code;
}

Output

enter image description here

Hope this would help!

5
  • 6
    I keep getting "navigation is null". I have tried several examples...
    – AppDreamer
    Nov 19, 2020 at 3:03
  • 12
    This is old, but for future visitors – you have to call it inside the constructor. stackoverflow.com/a/54891361/2950032
    – maazadeeb
    Apr 28, 2021 at 0:48
  • Can you still access the state data after a page refresh?
    – Sofía
    Jul 2, 2021 at 15:31
  • ok I just tested this myself, and it works perfectly only directly after routing to the new component from the old one. Once you reload the page, the state is undefined : (
    – Sofía
    Jul 2, 2021 at 15:49
  • This works perfectly till the user reload the page. Then state will be undefined. :(
    – Piyush
    Sep 24, 2021 at 15:42
2

In navigateExtra we can pass only some specific name as argument otherwise it showing error like below: For Ex- Here I want to pass customer key in router navigate and I pass like this-

this.Router.navigate(['componentname'],{cuskey: {customerkey:response.key}});

but it showing some error like below:

Argument of type '{ cuskey: { customerkey: any; }; }' is not assignable to parameter of type 'NavigationExtras'.
  Object literal may only specify known properties, and 'cuskey' does not exist in type 'NavigationExt## Heading ##ras'

.

Solution: we have to write like this:

this.Router.navigate(['componentname'],{state: {customerkey:response.key}});
2

I needed access to the data in CustomRouteReuseStrategy and I couldn't inject the Router there due to a circular dependency but you can use the Location object to read the state as well.

Send:

    this.router.navigate(['action-selection'], { state: { example: 'bar' } });

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

    constructor(private location: Location) {
      console.log(this.location.getState().example); // should log out 'bar'
    }
1

@dev-nish Your code works with little tweaks in them. make the

const navigationExtras: NavigationExtras = {
  state: {
    transd: 'TRANS001',
    workQueue: false,
    services: 10,
    code: '003'
  }
};

into

let navigationExtras: NavigationExtras = {
  state: {
    transd: '',
    workQueue: ,
    services: ,
    code: ''
  }
};

then if you want to specifically sent a type of data, for example, JSON as a result of a form fill you can send the data in the same way as explained before.

1
0

getStateById(stateId) { return this.http.get(environment.user_service_url + "/getStateById", {params:{"stateId": stateId}}); }

0

Since Angular 15, this.router.getCurrentNavigation() might return null, because the component is instantiated after the navigation.

The alternative is to access the state from the Location (the one from @angular/common)

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

  constructor(private location: Location) {
    location.getState() // do what you want 
  }
1
-14

Best I found on internet for this is ngx-navigation-with-data. It is very simple and good for navigation the data from one component to another component. You have to just import the component class and use it in very simple way. Suppose you have home and about component and want to send data then

HOME COMPONENT

import { Component, OnInit } from '@angular/core';
import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data';

@Component({
 selector: 'app-home',
 templateUrl: './home.component.html',
 styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

constructor(public navCtrl: NgxNavigationWithDataComponent) { }

 ngOnInit() {
 }

 navigateToABout() {
  this.navCtrl.navigate('about', {name:"virendta"});
 }

}

ABOUT COMPONENT

import { Component, OnInit } from '@angular/core';
import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data';

@Component({
 selector: 'app-about',
 templateUrl: './about.component.html',
 styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

 constructor(public navCtrl: NgxNavigationWithDataComponent) {
  console.log(this.navCtrl.get('name')); // it will console Virendra
  console.log(this.navCtrl.data); // it will console whole data object here
 }

 ngOnInit() {
 }

}

For any query follow https://www.npmjs.com/package/ngx-navigation-with-data

Comment down for help.

4
  • Does it transfer data in the form of params or just in the background? Feb 13, 2019 at 15:49
  • I couldn't understand @MariumMalik Can you please ask in a descriptive way? Feb 13, 2019 at 16:01
  • Yes it does @MariumMalik Feb 13, 2019 at 16:42
  • 14
    You appear to be the author of this, rather than "I found on the internet"? You are also being asked not to spam it on the Angular 7 thread that implements similar functionality (github.com/angular/angular/pull/27198) Mar 28, 2019 at 14:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.