0

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

2 Answers 2

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
      });
    }
Sign up to request clarification or add additional context in comments.

3 Comments

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.
@trichetriche thanks, you can edit my answer if you want to
nah a comment is enough, don't worry !
0

Use ActivatedRoute to get params from URL

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.