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.
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:
2) Route Optional Parameters:
3) Route Query Parameters:
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
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
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
Hope this would help!
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'
}
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
}
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}});
@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.
getStateById(stateId) {
return this.http.get<any>(environment.user_service_url + "/getStateById",
{params:{"stateId": stateId}});
}
When the NavigationEnd event is emitted, it retrieves the current navigation state using this.router.getCurrentNavigation(). If there is a navigation state available in the extras property of the navigation object, it logs the state to the console.
constructor(
private router: Router,
private activeRoute: ActivatedRoute
) {
this.router.events
.pipe(
filter((event) => event instanceof NavigationEnd),
takeUntil(this.unsubscribe$)
)
.subscribe((event) => {
const navigation = this.router.getCurrentNavigation();
if (navigation && navigation.extras.state) {
console.log(navigation.extras.state);
}
});
}
ngOnDestroy(): void {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
The this.router.events property represents an observable that emits
events related to navigation in the router.
The pipe method allows you to chain multiple operators to the observable.
In this case, the filter operator is used to only allow NavigationEnd events to pass through. This ensures that the code inside the subscribe callback is only executed when a navigation ends.
The takeUntil operator is used to complete the observable when the this.unsubscribe$ subject emits a
value. This is done to clean up the subscription when the component
is destroyed.
Finally, inside the subscribe callback, the current
navigation state is retrieved using
this.router.getCurrentNavigation(). If there is a navigation state
available and it has a state property in the extras object, the state
is logged to the console.
NB: In the ngOnDestroy method, the this.unsubscribe$.next() method is called to emit a value and complete the this.unsubscribe$ subject, which will in turn complete the takeUntil operator and unsubscribe from the router events.
this.router.events
.pipe(
filter((event) => event instanceof NavigationEnd),
take(1) // Only take the first event
)
.subscribe((event) => {
const navigation = this.router.getCurrentNavigation();
if (navigation && navigation.extras.state) {
console.log(navigation.extras.state);
}
});
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.
