Navigation from one component to another component without reloading both the component in Angular 6

Question

I have a web application developed using Angular.

This is the layout of my web applicaton

I have filters in filterComponent and products are displayed in productsComponent, On applying the filters in filterComponent the products should get updated in productsComponent with only refreshing productsComponent, In my case both are getting refreshed.

filterComponent.ts

if (isChecked) { 
    this.router.navigateByUrl(/home , { skipLocationChange: true });
    setTimeout(() => this.router.navigate([/products, id])); 
}else (!isChecked){
    this.router.navigateByUrl(/home , { skipLocationChange: true });
    setTimeout(() => this.router.navigate([/products, id]));
}