Implementing queryParams in Angular routing

Question

I am trying to add queryParams to the url when I click on particular text but It's not working here. I am not being able to see any queryParams on my url.

Here is my both HTML file and component file for that

html file

<div class="col-md-4 xc ">
  <div class="sticky-top">
     <ul class="list-group  ">
         <a *ngFor="let c of categories" class="list-group-item" 
         routerLink="/"
         routerLinkActive="active"
         [queryParams]="{category:c.name}"
         >
           {{c.name}}
         </a>
     </ul>
  </div>
</div>

.component.ts file

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AuthService } from '../auth/auth.service';
import { UserService } from '../auth/user.service';
import { FirebaseUserModel } from './user.model';
import { Subscription } from 'rxjs';
import { ProductsService } from '../services/products.service';
import { ItemsService } from '../services/items.service';

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
 })
export class HomeComponent implements OnInit{

user: FirebaseUserModel = new FirebaseUserModel();
profileForm: FormGroup;
products;
categories;
query;
filteredproducts;
subscription: Subscription;

constructor(
public userService: UserService,
public authService: AuthService,
private route: ActivatedRoute,
private fb: FormBuilder,
private prservice: ProductsService, private iservice: ItemsService, 
private activatedrouter: ActivatedRoute
 ) {

}

ngOnInit(){
this.route.data.subscribe(routeData => {
  let data = routeData['data'];
  console.log(data)
  if (data) {
    this.user = data;
    this.createForm(this.user.name);
  }
})
this.subscription = this.iservice.getdata().subscribe(data => {
  this.products = data;
console.log(this.products);

  this.activatedrouter.queryParams.subscribe(p => {
    this.query = p['category'];
    console.log(this.query)

    this.filteredproducts = this.categories?this.products.filter(p => p.select === this.query):this.products;
   });
});
this.subscription = this.iservice.getitems().subscribe(categ => {
  this.categories = categ;
  console.log(this.categories)
});
}

OnDestroy() {
this.subscription.unsubscribe();
}

createForm(name) {
this.profileForm = this.fb.group({
  name: [name, Validators.required ]
});

}

save(value){
this.userService.updateCurrentUser(value)
.then(res => {
  console.log(res);
}, err => console.log(err))
}


}

So i am not able to see

console.log(this.query) //it throws undefined

in my console that means

  this.activatedrouter.queryParams.subscribe(p => {
    this.query = p['category'];
    console.log(this.query)

    this.filteredproducts = this.categories?this.products.filter(p => p.select === this.query):this.products;
   });

does not work for me.

Here is the screenshot of all the console logs

https://ibb.co/r5QXmGc

@ashishpal sorry could you please elaborate what do you mean to say ? — Ratnabh Kumar Rai
– Ratnabh Kumar Rai, Commented Mar 14, 2019 at 11:16
What is this? this.categories?this.products.filter(p => p.select ===........ There is a question mark between categories?this... — rcanpahali
– rcanpahali, Commented Mar 14, 2019 at 11:17
Don't see any error in code. Could you give us a minimal reproduction on stackblitz. — Sachin Gupta
– Sachin Gupta, Commented Mar 14, 2019 at 11:18
@shadowman_93 thats something like ternary operator and no issue in that , it's working — Ratnabh Kumar Rai
– Ratnabh Kumar Rai, Commented Mar 14, 2019 at 11:18

Giovanni Avila · Accepted Answer · 2019-03-14 11:23:57Z

1

I'd suggest you to use a function on the html:

<div class="col-md-4 xc ">
  <div class="sticky-top">
     <ul class="list-group  ">
         <a *ngFor="let c of categories" class="list-group-item" routerLinkActive="active" (click)="navigate(c.name)">
           {{c.name}}
         </a>
     </ul>
  </div>
</div>

and in your controller:

import { ActivatedRoute, Router } from '@angular/router';
...
private route: Route,
private activatedrouter: ActivatedRoute,
...
navigate(catName: string): void {
  this.activatedrouter.navigate(['.'], { relativeTo: this.route, queryParams: {category: catName }});
}
...

answered Mar 14, 2019 at 11:23

Giovanni Avila

713 bronze badges

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

3 Comments

Giovanni Avila Over a year ago

There is anyway an error in your code: both route and activatedRoute are passed in the constructor as ActivatedRoute

Ratnabh Kumar Rai Over a year ago

hey thank you , ya i figured out and your way works but how is my method not working and your's working ...still unlcear

Giovanni Avila Over a year ago

i think it might be related with the error i pointed out. The twice injected activatedRoute but i'm not sure.

Dharman · Accepted Answer · 2020-02-18 21:03:42Z

0

According to the official Angular documentation for RouterLink

Input for routerLink directive should be an Array. Thus please change the below line in your code

<div class="col-md-4 xc ">
  <div class="sticky-top">
     <ul class="list-group  ">
         <a *ngFor="let c of categories" class="list-group-item" 
         [routerLink]="['/']" --> changed this
         routerLinkActive="active"
         [queryParams]="{category:c.name}"
         >
           {{c.name}}
         </a>
     </ul>
  </div>
</div>

edited Feb 18, 2020 at 21:03

Dharman♦

33.9k27 gold badges105 silver badges157 bronze badges

answered Mar 14, 2019 at 11:32

Sai Krishna

1

Collectives™ on Stack Overflow

Implementing queryParams in Angular routing

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