Angular 8 sending an array with the navigate() is returning an object instead of the array itself

Question

I want to send an array of data within the .navigate() of angular 8 routing module.

At the home component, the result of:

console.log(this.offers)

Is returning all available offers with all their related data.

After that, I am sending this.offers within the navigate:

this.router.navigate(['/offers'], {queryParams:{ 'offers': this.offers}});

At the offers component, I tried to get the array of offers using:

console.log(this.activatedRouter.snapshot.queryParams.get('offers'))

But the result is just [Object Object].

I tried to use this.activatedRouter.snapshot.params['offers'] but it returned the same thing.

I tried the following:

console.log(this.activatedRouter.snapshot.queryParamMap.get('offers'))

But it returned an [Object Object]:

query params are strings, inside the query string of the URL: `offers?foo=bar&baz=bing`. Trying to put JavaScript objects in query parameters doesn't make much sense. — JB Nizet, Aug 23 '19 at 20:45
Nothing at all. Just navigate to the component, and let the component load all the available offers if it needs to display them. — JB Nizet, Aug 24 '19 at 06:17

score 1 · Answer 1 · answered Aug 23 '19 at 22:10

Instead of using activatedRouter.snapshot, subscribe to this.activatedRoute.queryParams stream which actively emits any changes in query parameters.

@Component({ ... })
export class MyComponent implements OnInit {
  order: string;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams
      .filter(params => params.offers)
      .subscribe(params => {
        console.log('Query Params: ', params); // {offers: <value>}
      });
  }
}

Can use Params instead of queryParams ? – alim1990 Aug 24 '19 at 03:13 — alim1990, Aug 24 '19 at 03:13

score 0 · Answer 2 · answered Aug 24 '19 at 08:08

There are several solutions for it according to this link on medium.

The one I need is using this.navigate.

So the solution was at the originating component:

this.router.navigate(['/offers'], { state: {'offers': this.offers, 'info': this.info}});

And at the destination component which is not a child component in my case (it could, no problem with that), we should use the state extras which new from angular 7.2+:

this.offers = window.history.state.offers;

We cannot use the snapshot or queryParams in this case, as according to the link above, it will be removed after ngOnInit() is executed. SO best solution is to use the state extra

Angular 8 sending an array with the navigate() is returning an object instead of the array itself

2 Answers2