javascript - Angular 2/4 communication between two component via a shared service

Question

I am trying to build a simple shopping cart application. I have two components and a cart service like following.

<app-header></app-header>

<app-cart></app-cart> 

In cart service has all the functionality for doing adding an item to cart, delete item in the cart, cart quantity etc.

I need to update the cart count in the header component when the user adds a product to the cart.

How to do that with a shared service.

Answer 1

In this case, You can use a service with subject. A service in Angular is a singleton, meaning it is managed as a single instance. So if each of the components access the service, they will access the same shared data.

export class cartService{
    private prodCount = 0;
    prodCountCountChange: Subject<number> = new Subject<number>();
    UpdateCount(count: number) {
        this.prodCount = count;
        this.prodCountCountChange.next(this.prodCount);
    }
}

In your component you can do this,

  this._cartService.UpdateCount(this.prod.length);