Angular data not passing through routing

Question

I am sending data through routing like this

    navigateWithState(x) {
        console.log(x);
        this.router.navigateByUrl('/full-layout/add-form/1', { queryParams: {x} });
    }

And fetching it like this

 constructor(private route:ActivatedRoutet) {

      if(this.options == 1){
      console.log('edit');
      this.route
      .queryParams
      .subscribe(params => {
        console.log(params);
      });
    }
    else{
      console.log('add');

    }
}

but don't know why it is showing an empty array

You can see in the console

In console value, x has data that is showing in the console but when I pass through router it's showing blank.

I also try with navigationExtras like this

navigateWithState(x) {
    console.log(x);
    const queryParams: any = {};

    queryParams.myArray = JSON.stringify(x);

    const navigationExtras: NavigationExtras = {
      queryParams
    };
    this.router.navigateByUrl('/full-layout/add-form/1', navigationExtras);

}

in .ts

if(this.options == 1){
  console.log('edit');
  const myArray = this.route.snapshot.queryParamMap.get('myArray');
  console.log(myArray);

}
else{
  console.log('add');

}

It's showing null in myArray.

Apoorva Chikara · Accepted Answer · 2021-05-27 12:46:42Z

1

When you are using navigateByUrl, you need to add them in the URL. If you are using navigate then you can pass params.

  navigateWithState(x) {
        console.log(x);
        this.router.navigateByUrl(`/full-layout/add-form/1?x=${JSON.stringify(x)}`);
    }

With navigate you can use this. In this you will get values from the params.

  navigateWithState(x) {
        console.log(x);
        this.router.navigate(['/full-layout/add-form/1'], { queryParams: {x: JSON.stringify(x)}}); // when you get it parse it to JSON i.e JSON.parse('values');

}

edited May 27, 2021 at 12:46

answered May 27, 2021 at 12:36

Apoorva Chikara

8,8033 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ammadkh · Accepted Answer · 2021-05-27 12:40:47Z

0

If you are using navigateByUrl, you have to pass params like below;

this.router.navigateByUrl(`/full-layout/add-form/1?x=${x}`);

answered May 27, 2021 at 12:40

ammadkh

6064 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular data not passing through routing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related