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

{ path: 'booking/details', component: DetailsComponent, data: { title: extract('Details'), dataTransfer: '' } },

sending component

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

this.caseData looks like this

{
  "getAllInfo": {
    "ticket": {
      "internalNum": "12345",
      "comp": "11"
    },
    "caseInfo": {
      "masVolgnommer": "1",
      "masMaand": "1",
      "masJaar": "2010"
    }
  }
}

receiving component

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

The values in that array are used to build the URL, not the data property. It sounds like you may be better off creating a shared service. — user184994
– user184994, Commented Nov 8, 2018 at 6:31
yes you are correct, I am just passing data from one component to another so doing it through the url is not correct — RRB
– RRB, Commented Nov 8, 2018 at 6:34

Rahul · Accepted Answer · 2018-11-08 06:44:51Z

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 !!

Sachila Ranawaka · Accepted Answer · 2018-11-08 06:18:50Z

0

set the caseData inside the subscribe method

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

answered Nov 8, 2018 at 6:18

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

1 Comment

RRB Over a year ago

this is the response {title: "Details", dataTransfer: ""} The data is not getting inserted into the dataTransfer parameter

Collectives™ on Stack Overflow

Pass data in Angular router dynamically

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related