queryparams angular code example

Example 1: angular router with wuery param

goProducts() {
  this.router.navigate(['/products'], { queryParams: { order: 'popular' } });
}

http://localhost:4200/products?order=popular

 constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams
      .filter(params => params.order)
      .subscribe(params => {
        console.log(params); // { order: "popular" }

        this.order = params.order;
        console.log(this.order); // popular
      }
    );
  }

Example 2: angular set query params

constructor(private router: Router) { }

public myMethodChangingQueryParams() {
  const queryParams: Params = { myParam: 'myNewValue' };

  this.router.navigate(
    [], 
    {
      relativeTo: activatedRoute,
      queryParams: queryParams, 
      queryParamsHandling: 'merge', // remove to replace all query params by provided
    });
}

Example 3: queryparams angular

Query parameters in Angular allow for passing optional parameters across any route in the application. Query parameters are different from regular route parameters, which are only available on one route and are not optional (e.g., /product/:id).

Example 4: queryparams angular

goProducts() {
  this.router.navigate(['/products'], { queryParams: { order: 'popular', 'price-range': 'not-cheap' } });
}

Example 5: queryparams angular

goProducts() {
  this.router.navigate(['/products'], { queryParams: { order: 'popular' } });
}