How to communicate between sibling components

I am new to angular, please let me know if I am doing anything wrong or following a wrong approach.

I have a foodDetails component where on click of buynow button, food is pushed into an array.

ShopDataService is a common service used between foodDetails component and headerComponent, in header component i want to keep displaying the length of product array everytime when user click on buynow button in foodDetails component. So how to notify the header component when buynow is clicked in foodDetails component.

export class ShopDataService {
    products: any[];
    constructor() {
        this.products = [];
    }
    add(product: any) {
        this.products.push(product);
    }
    get() {
        return this.products;
    }
}

FoodDetails Component:

buynow(product){
    this.ShopDataService.add(product);
}

Here is a structure of my html container:

<div class="container">
  <prac-header></prac-header>
  <router-outlet></router-outlet>
</div>

The header component is prac-header, whereas foodDetail Component in router-outlet