CODEWITHSUNDEEP
angularangular-router
Kenry Sanchez
Kenry Sanchez

Reputation: 1733

Angular Passing Data Between Routes

I have a little problem using routes in angular 4. You know, when I am trying to pass data from a component to another using navigate('root', data), I just received [object Object],[object Object],[object Object].

Component

export class FillRequestComponent implements OnInit {

  constructor(private route: Router, private dataRoute: ActivatedRoute) { }

  ngOnInit() {
    const key: Products = this.dataRoute.snapshot.params['objectProducts'];
    console.log(key);
  }

Interface

export interface Products {

  color: string,
  question: string,
  surname: string,
  icon: string,
  selected: boolean,
  transparent: boolean
}

Send Method

const data = {
      category: this.optionSelected,
      objectProducts: this.optionSelected === 'CREDIT' ? this.productCreditList :
        this.productAccountsList
    };

    this.route.navigate(['/requests/fill', data]);

Upvotes: 45

Views: 83784

Answers (3)

mtpultz
mtpultz

Reputation: 18248

In the current version this is now available in @angular/router.

Angular 7.2 introduces route state to NavigationExtras, which takes an object literal similar to queryParams, etc.

The state can be set imperatively:

this.router.navigate(['example'], { 
  state: { example: 'data' } 
});

or declaratively:

<a routerLink="/example" [state]="{ example: 'data' }">
  Hello World
</a>

And read in a top-level component using:

this.router.getCurrentNavigation().extras.state;

or within child components using:

window.history.state

Added a working example of it being used on StackBlitz

Upvotes: 87

Suren Srapyan
Suren Srapyan

Reputation: 68635

When you pass an object as a route parameter, it causes to call toString on that object and you get the result [object Object] from the object.

const obj = {};
console.log(obj.toString());

If you want to pass complex type, you need to stringify it to a string and pass as a string. After when you get it, you need again to parse into an object.

this.route.navigate(['/requests/fill', JSON.stringify(data)]);

and access later 

const key: Products = JSON.parse(this.dataRoute.snapshot.params['objectProducts']);

Upvotes: 24

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38663

You can't pass list of data in params

So you need convert to string the list of objects then pass 

navigate('root',   JSON.stringify(data))

Then do parsing while get this

const key: Products =JSON.parse(this.dataRoute.snapshot.params['objectProducts']);

Upvotes: 4

Related Questions