There are a few mistakes in your code, the first one being that you have

productService.getAll().subscribe (products => this.products);

which should actually be

productService.getAll().subscribe(products => this.products = products);

However, this won't work because it is an asynchronous call.

So, the first step is to update your productService to "cache" the products. Your service should look like this:

products: any[]
getAll() {
    return this.products ? of(product) :
           this.httpClient.get("your-url").pipe(
              tap(res=>this.products=res;
           )
}

We are using of from 'rxjs' and tap from 'rxjs/operators'

This modification ensures that getProducts returns an Observable of products. The first time it is called, "products" is undefined, so it returns the response of httpClient.get. The tap function updates the value of products, so the next time it is called, the variable products will be used.

The second mistake is using the "constructor", instead use ngOnInit to subscribe to route.queryParamMap.

ngOnInit()
{
   this.route.queryParamMap.subscribe(params => {
      this.category = params.get('category');

      //here you get all the products
      this.productService.getAll().subscribe (
         products => this.products=products);
         //Setting the filtered Products Array
         this.filteredProducts = (this.category) ? 
             this.products.filter(p => {
              return p.category === this.category;
         }) : 
         this.products;
         console.log(this.filteredProducts); // Console.log FilteredProducts Array
      });
}

Another approach would be to use switchMap and make filteredProducts an observable (then we can use filteredProduct$ | async)

this.filteredProduct$ = this.route.queryParamMap.pipe(
     switchMap(params=>{
       this.category=params.get('category');
       return this.productService.getAll().pipe( 
          switchMap(products=>{
              const filteredProduct=!this.category?products:
                   products.filter(p => {
                      return p.category === this.category;
                    }) : 
             return of(filteredProduct):

          })
       )
     })
   ) 

NOTE: I haven't checked the code but this is the general idea, I hope this explanation is helpful

The issue lies within the filtering process, specifically when attempting to filter products based on their category. Unfortunately, the filter does not seem to be working as expected due to the fact that the program is unable to retrieve the product's category using p.category. This could be attributed to the use of the latest versions of Angular and Firebase. To resolve this, consider utilizing p.payload.val().category instead, allowing for a successful comparison with this.category.

Feel free to try out the following code snippet:

productService.getAll().pipe(switchMap(products => {
    this.products = products;
    return route.queryParamMap;
  }))
      .subscribe(params => {
      this.category = params.get('category');
      this.filterProducts = (this.category) ?
      this.products.filter(p => (p.payload.val().category)===this.category) :
      this.products;
    });

It's easy to solve this issue! I wasted 2 hours trying to figure it out. When passing queryParams using the c.key, the value is in lowercase like "bread," while our product category value is in uppercase like "Bread." Therefore, you need to provide the value of the category name instead of the category key. Just make this simple change:

Change THIS:

<a *ngFor="let c of categories$ | async" 
    routerLink="/"
    [queryParams]="{ category: c.key }"
    class="list-group-item list-group-item-action"
    [class.active] = 'category === c.key'
    >
    {{ c.payload.val().name }}
</a>

TO:

<a *ngFor="let c of categories$ | async" 
    routerLink="/"
    [queryParams]="{ category: c.payload.val().name }"
    class="list-group-item list-group-item-action"
    [class.active] = 'category === c.payload.val().name'
    >
    {{ c.payload.val().name }}
</a>

the correct answer for the most recent version of Angular is:

products.component.ts:

import { switchMap } from 'rxjs/operators';
import { Product } from './../models/product';
import { Category } from './../models/category';
import { ActivatedRoute } from '@angular/router';
import { ProductService } from './../product.service';
import { Component, OnInit } from '@angular/core';
import { CategoryService } from '../category.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent {

products: Product[] = [];
filteredProducts: Product[] = [];
categories$: Observable<any>;
category: string;
products$: Observable<any>;

constructor(
route: ActivatedRoute,
productService: ProductService,
categoryService: CategoryService
) {
productService
.getAll().pipe(
switchMap(products => {
this.products = products;
return route.queryParamMap;
}))
.subscribe(params => {
this.category = params.get('category');
this.filteredProducts = (this.category) ?
this.products.filter(p => p.category === this.category) :
this.products;
});
this.categories$ = categoryService.getAll();
}
}