Passing string as query params not working

Question

I need to pass a string value along with navigation from one component to other using queryparams.

Component1:
 stringdata = "Hello";
 this.router.navigate(['component2'], { queryParams:  stringdata });

Component2:

ngOnInit() {

  this.route.queryParams.subscribe(params => {
    console.log(params)
  })
}

Console output I get in component2 is:-
{
"0": "H",
"1": "E",
"2": "L",
"3": "L",
"4": "O",
}

In browser after navigation I can see 
domain.com/child20=H&1=E&2=L&3=L&4=O, why it is not passing as string!

That is not a valid Query params. You may refer to HTML5 URLs and the <base href>. — Yong Shun
– Yong Shun, Commented Aug 26, 2021 at 6:53

Nitheesh · Accepted Answer · 2021-08-26 07:00:28Z

1

Pass your string as query params like

this.router.navigate(['component2'], { queryParams:  { name: stringdata }});

And inside your component access it with

this.route.queryParams.subscribe(params => {
    console.log(params.name)
})

queryParams expect an object as argument.

edited Aug 26, 2021 at 7:00

answered Aug 26, 2021 at 6:55

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

Passing string as query params not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related