Retreiving queryparams from url in angular

Question

I am not being able to see the queryparams in my url after clicking the desired buttons

here is my code

html file

<div class="row justify-content-center">

<div class="col-md-5 ">
<div class="list-group">
  <a class="list-group-item " [routerLink]="['/product']" 
  [queryParams]="{category:Bread}"
  >Bread</a>

  <a class="list-group-item " [routerLink]="['/product']"
  [queryParams]="{category:Dairy}"
  >Dairy</a>

  <a class="list-group-item " [routerLink]="['/product']"
  [queryParams]="{category:Fruits}"
  >Fruits</a>

  <a class="list-group-item " [routerLink]="['/product']"
  [queryParams]="{category:SeasoningsandSpices}"
  >Seasonings and Spices</a>

  <a class="list-group-item " [routerLink]="['/product']"
  [queryParams]="{category:Vegetbales}"
  >Vegetables</a>

</div>
</div>
</div>

i am only redirected to the page that has the routing link of '/product' but not seeing queryparams on the url and also how do i retrieve it if have queryparams ? here is the ss

https://ibb.co/DR0p9gz

Pardeep Jain · Accepted Answer · 2019-02-18 09:29:26Z

1

but not seeing queryparams on the url

You are passing value of queryParam as static value so you need to wrap it within quotes like this -

<a class="list-group-item " [routerLink]="['/product']" 
  [queryParams]="{category:'Bread'}"
  >Bread</a>

how do i retrieve it if have queryparams

And to get query Params in the component use code like this in the constructor -

    constructor(private route: ActivatedRoute){
      this.route.queryParams.subscribe(params => {
         // get params here with key name
      });
    }

edited Feb 18, 2019 at 9:29

answered Feb 18, 2019 at 9:23

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

3 Comments

user4676340 Over a year ago

To explain briefly, you OP are trying to pass variables called Bread/Dairy/Fruits, while @Pardeep is sending strings. That's why your code isn't working, while his should be.

Pardeep Jain Over a year ago

@trichetriche thanks, you can edit my answer if you want to

user4676340 Over a year ago

nah a comment is enough, don't worry !

Abdul Basit · Accepted Answer · 2019-02-18 09:23:30Z

0

Use ActivatedRoute to get params from URL

private route: ActivatedRoute
this.route.queryParams.subscribe(params => {
         // get params
      });

answered Feb 18, 2019 at 9:23

Abdul Basit

1,3801 gold badge10 silver badges18 bronze badges

Collectives™ on Stack Overflow

Retreiving queryparams from url in angular

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related