title: Angular - filtering the list of products based on the selected category
body: <p>I would like to create a navbar in my app, which would filter my list of products based on the selected category. It looks like in this picture:
  <a href="https://i.stack.imgur.com/tQGNK.png" rel="nofollow noreferrer">My navbar</a></p>
  <p><strong>My SortProductComponent:</strong></p>
  <pre><code>    export class SortProductsComponent implements OnInit {
    categoriesList: Categories[];
    @Output()
    onFilterChange = new EventEmitter&lt;any&gt;();
    showFilters = true;
    sideShown = false;
    constructor(private categoriesService: CategoriesProductsService) { }
    ngOnInit() {
      this.displayCategories();
    }
    displayCategories() {
      this.categoriesService.getCategories().subscribe((data) =&gt; {
       this.categoriesList = data;
      });
    }
    onInputChange($event, filterbyCategory) {
      const change = $event.target.checked ? 1 : -1;
      this.onFilterChange.emit({
        filterbyCategory,
        isChecked: $event.target.checked,
        change
      });
      console.log(this.onFilterChange);
  }
  }
  </code></pre>
  <p>onInputChange method returns the correct data e.g. after selecting the category Smartfons returns the following data: <a href="https://i.stack.imgur.com/r6itd.png" rel="nofollow noreferrer">Debugging</a> and properties isChecked= true; change = 1; <br/>
  <strong>ProductComponent a parent component:</strong></p>
  <pre><code>  export class ProductComponent implements OnInit {
    listProduct: Products[];
    filteredProduct: Products[] = [];
    @ViewChild('filtersComponent')
    filtersComponent: SortProductsComponent;
    constructor(protected productsService: CategoriesProductsService) { }
    ngOnInit() {
      this.displayProducts();
  
    }
    displayProducts() {
      this.productsService.getProducts().subscribe((data) =&gt; {
        this.listProduct = data;
        });
      }
   onFilterChange(data) {
    if (data.isChecked) {
        this.filteredProduct.push(data.filterbyCategory.Products);
    }
   }
  }
  </code></pre>
  <p><strong>The HTML template for the ProductComponent component:</strong></p>
  <pre><code>    &lt;div class=&quot;d-flex&quot; id=&quot;wrapper&quot;&gt;
    &lt;div  *ngIf=&quot;wrapper&quot; class=&quot;col-xs-12 bg-light border-right&quot; id=&quot;sidebar-wrapper&quot;&gt;
      &lt;div class=&quot;sidebar-heading&quot;&gt;Sorting navbar&lt;/div&gt;
      &lt;app-sort-products  #filtersComponent (onFilterChange)='onFilterChange($event)' &gt;&lt;/app-sort-products&gt;
    &lt;/div&gt;
    &lt;div id=&quot;page-content-wrapper&quot;&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;button class=&quot;btn btn-primary&quot; id=&quot;menu-toggle&quot; (click)=&quot;showHide()&quot; &gt;Sidebar&lt;/button&gt;
          &lt;div class=&quot;row row-eq-height&quot;&gt;
              &lt;div class=&quot;col-12 col-xs-6 col-sm-4 col-md-4  h-100   d-inline-block &quot; *ngFor=&quot;let product of listProduct&quot; &gt;
                &lt;h3 style=&quot;text-align: center&quot;&gt;{{product.Name}}&lt;/h3&gt;
                &lt;img class=&quot;img-responsive&quot;  style=&quot;max-width:150px;max-height:150px&quot; src=&quot;{{product.Image}}&quot;&gt;
                &lt;p style=&quot;color: red&quot;&gt;Price: {{product.Price}}PLN&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Class Categories and Product:</strong></p>
  <pre><code>export class Categories {
    Id: number;
    Name: string;
    Product: Products[];
  }
  
  export class Products {
    Id: number;
    Name: string;
    Description: string;
    DetailedDescription: string;
    Price: number;
    IsNewProduct: boolean;
    PromotionalProduct: boolean;
    Image: string;
    CategoryId: number;
  }
  </code></pre>
  <p>I don't know how to correctly create a method that receives data from a child's component, and then filters the list of products based on the category list selected from the checkbox. <br>
  Any help or suggestion is welcome</p>