To establish interaction between the category (as a child component) and product (as a parent component), you should utilize @Input() and @Output().

Parent HTML - [product.component.html]

<app-filter-categories [categoryResult]="categoryFilterValue" (clicked)="onClickedCategoryFilter($event)">
</app-filter-categories>

<div class="row">
<!-- Insert your code for the list of products here -->
</div>

Parent component - [product.component.ts]

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
      moduleId: module.id,
      selector: 'all-products',
      templateUrl: 'all-products.component.html',
      changeDetection: ChangeDetectionStrategy.Default
})

export class AllProductsComponent implements OnInit {

  constructor(private _productsService: ProductsService,,
        private _router: Router) {
  }

  ngOnInit() {
     this.fillAllProducts(0);
  }

  fillAllProducts(pageIndex) {
     this.loadingProgress = true;
     var searchParams = new SearchParametersCategoryModel();
     searchParams.CategoryFilter = this.categoryFilterValue;
     searchParams.PageIndex = pageIndex;

     //TODO - service call
  }

  onClickedCategoryFilter(filterValue: any) {
    this.categoryFilterValue = filterValue;
    this.allProductData$ = [];
    this.currentPageIndex = 0;
    this.fillAllProducts(this.currentPageIndex);
  }

  selectProduct(productId: any, selectedProductCart) {
    //TODO
  }
}

Child HTML - [category.component.html]

<div class="row">
<!-- Add your code for different types of categories here -->
</div>

Child component - [category.component.ts]

// libs
import { Component, Input, Output, EventEmitter, OnInit, AfterViewInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';
import { CategoriesService } from '../service/categories.service';

@Component({
  moduleId: module.id,
  selector: 'app-filter-categories',
  templateUrl: 'category.component.html'
})

export class CategoryFilterComponent implements OnInit, AfterViewInit {
  toggle = true;
  @Input() categoryResult: any = '';
  @Output() clicked = new EventEmitter<any>();

  Category = [];
  SelectedCategoryItems = [];
  categoryFilterList: DictionaryFilter<string> = {};    // List of selected categories with key-value

  constructor(private _categoriesService : CategoriesService) {
  }

  ngOnInit() {
    //todo - fill categories list
  }

  onClickSelectCategory(searchType: any, event: any): any {
    if (!(event.target.parentElement.className.search('active') > 1)) {
      //this.removeFilterElementWithKey(searchType);
      //above line to add logic for remove deselected data from categoryFilterList
    } else {
       this.categoryFilterList.push(element);
    }

    this.clicked.emit(this.categoryFilterList);
  }
}

This solution should resolve your issue.

Presenting my demonstration application. This serves as a sample to illustrate the proper structuring for your app's functionality. While it involves calling web services, adapting it should be straightforward:

A CategoryComponent is utilized in connection with the CategoryService.

The template

<H2>Category Component</H2>
<div *ngFor="let category of categories; let ndx=index;">
     <label>{{category?.name}}</label>
     <input type="checkbox" id="cat.{{ndx}}" [(ngModel)]="category.selected" (change)="emitChange()">
</div>

The typescript file

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CategoryService } from '../services/category.service';
import { Category } from '../models/models';

@Component({
    moduleId: module.id,
    selector: 'pm-category',
    templateUrl: 'category.component.html',
    styleUrls: ['category.component.scss']
})
export class CategoryComponent implements OnInit, OnDestroy {

    private categories: Array<Category> = [];

    constructor(private categoryService: CategoryService) {

    }

    ngOnInit() {
        this.categoryService.getCategories().subscribe(list => {
            if (list) {
                this.categories = list;
            }
        });
    }

    ngOnDestroy() { }

    private emitChange(): void {
        this.categoryService.setCategories(this.categories);
    }

}

Upon selecting a Category, the service gets updated.

Next up is the ProductsComponent, linking to both the CategoryService and the ProductsService while containing the ProductComponent as a child element.

The template

<H2>Products Component</H2>
  <div *ngFor="let product of products; let ndx=index;">
    <label>{{product?.name}}</label>
    <input type="radio" name="productGroup" id="prod.{{ndx}}" value="product" (change)="setSelectedProduct(product)">
</div>

<pm-product [product]="product"></pm-product>

The typescript file

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ProductsService } from '../services/products.service';
import { CategoryService } from '../services/category.service';
import { Product } from '../models/models';

@Component({
    moduleId: module.id,
    selector: 'pm-products',
    templateUrl: 'products.component.html',
    styleUrls: ['products.component.scss']
})
export class ProductsComponent implements OnInit, OnDestroy {

    public product: Product;
    private products: Array<Product> = [];

    constructor(
       private productsService: ProductsService,
       private categoryService: CategoryService
    ) { }

    ngOnInit() {
        // Logic for retrieving and filtering products based on selected categories goes here
    }

    ngOnDestroy() { }

    private setSelectedProduct(product: Product): void {
        this.product = product;
    }

}

Selecting a product displays its details in the ProductComponent through Input Binding between the components. Altering category selections in the CategoryComponent adjusts the list of displayed products accordingly.

Here's the ProductComponent

The template

<H2>Product Component</H2>
<div>Price: {{product?.details?.price}}</div>
<div>Age: {{product?.details?.age}}</div>

and the typescript file

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Product } from '../models/models';

@Component({
    moduleId: module.id,
    selector: 'pm-product',
    templateUrl: 'product.component.html',
    styleUrls: ['product.component.scss']
})
export class ProductComponent implements OnInit, OnDestroy {

    @Input() product: Product;

    ngOnInit() { }

    ngOnDestroy() { }

}

Note that the provided sass files are empty but essential for compiling!

Included are the services and model definitions used:

The CategoryService

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { Category } from '../models/models';

@Injectable()
export class CategoryService {

    // Implementation code for handling categories
}

The ProductsService

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { Product, Details } from '../models/models';

@Injectable()
export class ProductsService {

    // Implementation code for managing products
}

Models defined in models.ts

export class Category {
    // Definition for Category object
}

export class Details {
    // Definition for Details object
}

export class Product {
    // Definition for Product object
}

MainPageModule setup for integration into the larger app structure.

import { NgModule } from '@angular/core';
// Import statements

@NgModule({
    imports: [
        // Module imports
    ],
    declarations: [
       // Components declaration
    ],
    exports: [
       // Component exports
    ],
    providers: [
       // Services inclusion
    ]
})
export class MainPageModule {

} 

Combining these segments results in a basic functioning app mirroring your outlined requirements. It aims as a demo for illustrative purposes. :)

To implement a new service, such as sibling-data-exchange.service.ts, follow these steps:

import { Observable } from 'rxjs/Rx';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Injectable } from '@angular/core';

@Injectable()
export class SiblingDataExchangeService {
  private info = new BehaviorSubject('information');

  getInfo(): Observable<string> {
    return this.info.asObservable();
  }

  getInfoValue(): string {
    return this.info.getValue();
  }

  setInfo(val: string) {
    this.info.next(val);
  }
}

In your components, import and subscribe to the service, adding a method to update the value in the service.

import { SiblingDataExchangeService } from 'sibling-data-exchange.service';

constructor(
    private siblingDataExchangeService: SiblingDataExchangeService
) { 

    // Stay informed of any changes to the sibling's value
    this.siblingDataExchangeService.getInfo().subscribe(value => {
        // Handle the retrieved value accordingly
        this.copyOfValue = value;
    });
}

// Update the value for the sibling component
private communicateValue(value: string): void {
   siblingDataExchangeService.setInfo(value);
}

Don't forget to PROVIDE the new service within the respective module!

import { SiblingDataExchangeService } from 'sibling-data-exchange.service';

@NgModule({
    imports: [
       ...
    ],
    exports: [
       ...
    ],
    declarations: [
       ...
    ],
    providers: [
        SiblingDataExchangeService
    ]

By utilizing the subscription to the BehaviorSubject, your components can now communicate through the service.

If CategoryComponent sends a list to ProductsComponent triggering the getProducts()-method upon arrival, it's recommended to use the aforementioned service-communication approach.

In ProductsComponent, adjust the subscription like this:

this.siblingDataExchangeService.getInfo().subscribe(value => {
    // Assign the received value to your local list (assuming you have one)
    this.categories = value; 

    // Proceed with calling your method
    this.getProducts(); 
});

An alternative approach involves directly using 'value' as a parameter in your method signature, for instance:

getProducts(categories: Array<string>)

Followed by:

this.siblingDataExchangeService.getInfo().subscribe(value => {
    this.getProducts(value); 
});

Note that this subscription ensures your method is invoked each time CategoryComponent transmits a new list, meeting your requirements.