Send data through routing paths in Angular

Question

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.

• Motomine: I think it should be other way like in AngularJS, where we were able to do something like $state.go('heroes', {some-data: "otherData"})
• Virendra Yadav: Use my approach npmjs.com/package/ngx-navigation-with-data last comment by me, best for everyone
• Maciej Wojcik: Routing is a complex feature in Angular and definitely worth learning! Here you may find interesting details about passing data via the routing: indepth.dev/tutorials/angular/… This guide goes through various techniques about using static data in routing definition and dynamic data (state) during specific navigation.

Answer 1

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

• Motomine: 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.
• DeborahK: 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: 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: 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.
• Arsen Khachaturyan: Just a small hint: route type is ActivatedRoute, not Router.

Answer 2

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

• Randy: This is the correct answer given the new features in Angular 7.
• tobi_b: 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.
• Véger Lóránd: 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."
• crucifery: Also make sure you don't try to recieve an extras object in ngOnInit() as this.router.getCurrentNavigation().extras
• Véger Lóránd: @KinleyChristian Check out this answer, if you have further questions let me know! stackoverflow.com/a/54891361/4222504

Answer 3

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!

• AppDreamer: I keep getting "navigation is null". I have tried several examples...
• maazadeeb: This is old, but for future visitors – you have to call it inside the constructor. stackoverflow.com/a/54891361/2950032
• Sofía: Can you still access the state data after a page refresh?
• Sofía: 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 : (
• Piyush: This works perfectly till the user reload the page. Then state will be undefined. :(

Answer 4

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'
 }

• Aaron J: This way works well. If you want to use it entirely in the template, provide your state as bound input to the same element you're providing routerLink to. Eg: <button [routerLink]="['action-selection']" [state]="{ example: 'bar' }"> Navigate with State </button>
• Alexandre Alves: This worked for me! I just had to use: console.log((this.location.getState() as { example: any })?.['example'])

Answer 5

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 
 }

• Jnr: stackoverflow.com/a/75150492/1659605
• Jnr: stackoverflow.com/a/75173301/1659605

Answer 6

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}});

Answer 7

@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.

Answer 8

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

Answer 9

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.

• Sarah Mandana: Does it transfer data in the form of params or just in the background?
• Virendra Yadav: I couldn't understand @MariumMalik Can you please ask in a descriptive way?
• Virendra Yadav: Yes it does @MariumMalik
• IrishDubGuy: 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)