CODEWITHSUNDEEP
angularionic-frameworkionic4
Kravitz
Kravitz

Reputation: 2859

Angular Routing - passing json object but param is 1 solid string

Im building an app and passing user data around different pages, I have a variable called profileData which is a json type of Profile.

Im passing it in the router like so:

return this.router.navigate(['/chat-profile', { profile: JSON.stringify(this.profileData) }]);

when i navigate to the page the data url i see in the browser is like so

http://localhost:8100/chat-profile;profile=%7B%22photos%22:%5B%5D,%22uid%22:%22AzvHdHKIYS%22,%22enabled%22:true,%22gps%22:false,%22about%22:%22%22,%22createdAt%22:%222019-04-30T14:34:06.994Z%22,%22updatedAt%22:%222019-04-30T14:34:22.033Z%22,%22gender%22:%22M%22,%22name%22:%22joe%22,%22location%22:%7B%22latitude%22:220.09,%22longitude%2222:14.46%7D,%22age%222:22,%22id%22:%22FbbQseOJFH%22%7D

When accessing it in the component its just one solid string. How to pass an object in angular routing

Upvotes: 0

Views: 9317

Answers (2)

anymeshsingh
anymeshsingh

Reputation: 271

Using router params to share such data between component in angular is a bad practice. You should use shared service for that. For more details on different ways to share data between components in angular look at this article:

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

Upvotes: 2

Hien Nguyen
Hien Nguyen

Reputation: 18975

You can change to

this.router.navigate(['/chat-profile'], 
        { queryParams: { profile: JSON.stringify(this.profileData) }});

Get parameter by

 this.route.queryParams.subscribe(
      params => {
         let data = JSON.parse(params['profile']);
         console.log('Got param: ', data.longitude);

      }
    )

Upvotes: 3

Related Questions