角度-根据所选类别过滤产品列表

Question

我想在我的应用程序中创建一个导航栏，该导航栏将根据所选类别过滤我的产品列表。看起来像这张照片： My navbar

我的SortProductComponent：

    export class SortProductsComponent implements OnInit {
  categoriesList: Categories[];
  @Output()
  onFilterChange = new EventEmitter<any>();
  showFilters = true;
  sideShown = false;
  constructor(private categoriesService: CategoriesProductsService) { }
  ngOnInit() {
    this.displayCategories();
  }
  displayCategories() {
    this.categoriesService.getCategories().subscribe((data) => {
     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);
}
}

onInputChange方法返回正确的数据，例如选择类别之后，Smartfons将返回以下数据：Debugging，并且属性isChecked = true;变化= 1;
ProductComponent父组件：

  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) => {
      this.listProduct = data;
      });
    }
 onFilterChange(data) {
  if (data.isChecked) {
      this.filteredProduct.push(data.filterbyCategory.Products);
  }
 }
}

ProductComponent组件的HTML模板：

    <div class="d-flex" id="wrapper">
  <div  *ngIf="wrapper" class="col-xs-12 bg-light border-right" id="sidebar-wrapper">
    <div class="sidebar-heading">Sorting navbar</div>
    <app-sort-products  #filtersComponent (onFilterChange)='onFilterChange($event)' ></app-sort-products>
  </div>
  <div id="page-content-wrapper">
    <div class="container-fluid">
        <button class="btn btn-primary" id="menu-toggle" (click)="showHide()" >Sidebar</button>
        <div class="row row-eq-height">
            <div class="col-12 col-xs-6 col-sm-4 col-md-4  h-100   d-inline-block " *ngFor="let product of listProduct" >
              <h3 style="text-align: center">{{product.Name}}</h3>
              <img class="img-responsive"  style="max-width:150px;max-height:150px" src="{{product.Image}}">
              <p style="color: red">Price: {{product.Price}}PLN</p>
            </div>
          </div>
    </div>
  </div>
</div>

类别和产品：

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;
}

我不知道如何正确创建一种方法来从孩子的组件接收数据，然后根据从复选框中选择的类别列表过滤产品列表。
欢迎任何帮助或建议