CODEWITHSUNDEEP
angulartypescript
rameez khan
rameez khan

Reputation: 359

Angular data not passing through routing

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

enter image description here

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.

Upvotes: 1

Views: 69

Answers (2)

Apoorva Chikara
Apoorva Chikara

Reputation: 8773

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');

}

Upvotes: 1

ammadkh
ammadkh

Reputation: 597

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

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

Upvotes: 0

Related Questions