Pass data in Angular router dynamically

Question

I am trying to send data(Object) from one component to another however I am getting an empty result.

Here is my code

routing module

Answer 1

Data property is not needed in your route - without adding data you can bind data as a json and read it { path: 'booking/details', component: DetailsComponent } this is fine to pass data while routing - whereas data property in your route declaration is used to pass data every time when the route is navigated

When you try to navigate booking/details everytime you will get data {title: "Details", dataTransfer: ""} to read this data you can inject ActivatedRouteSnapshotin your constructor and read as

this.activatedRouteSnapshot.data["title"]this will return Details

In your case if you want to pass data to another component just pass the data as a Json

this.router.navigate(['/booking/details', { caseData : this.caseData }]);

Finally you can read the data in the same way mentioned above - this.activatedRouteSnapshot.data["caseData"]

Hope this works - Happy coding !!

Answer 2

set the caseData inside the subscribe method

this.route
 .data
 .subscribe(v => {
   this.caseData = v;
   console.log(this.caseData) 
});