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
