1goProducts() {
2  this.router.navigate(['/products'], { queryParams: { order: 'popular' } });
3}
4
5http://localhost:4200/products?order=popular
6
7 constructor(private route: ActivatedRoute) { }
8
9  ngOnInit() {
10    this.route.queryParams
11      .filter(params => params.order)
12      .subscribe(params => {
13        console.log(params); // { order: "popular" }
14
15        this.order = params.order;
16        console.log(this.order); // popular
17      }
18    );
19  }

1constructor(private router: Router) { }
2
3public myMethodChangingQueryParams() {
4  const queryParams: Params = { myParam: 'myNewValue' };
5
6  this.router.navigate(
7    [], 
8    {
9      relativeTo: activatedRoute,
10      queryParams: queryParams, 
11      queryParamsHandling: 'merge', // remove to replace all query params by provided
12    });
13}

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

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

1Query 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).