CODEWITHSUNDEEP
angular
ratnabh rai
ratnabh rai

Reputation: 76

Retreiving queryparams from url in angular

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

Upvotes: 0

Views: 61

Answers (2)

Pardeep Jain
Pardeep Jain

Reputation: 86740

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

Upvotes: 1

Abdul Basit
Abdul Basit

Reputation: 1382

Use ActivatedRoute to get params from URL

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

Upvotes: 0

Related Questions