How to Sync data between two components using a service

Issue

I have two components that I want to sync data with.

From user/product/product.component.ts

To user/carts/carts.component.ts

In the product component I am receiving data from firebase about the price of a product

totalPrice;

addToCart(item, counter, totalPrice){
    this.totalPrice = this.myDocData.price * counter;
   this._backendService._fincartPriceSource.next(this.totalPrice);
}

The above function gets the price increases it as per the counter number and then sends it to the service

This is my service code

_fincartPriceSource = new Subject<any>();

This is my cart code

export class CartsComponent implements OnInit {
  cartprice="0";

  constructor(private _backendservice: BackendService) { 

  }

  ngOnInit() {
    this._backendservice._fincartPriceSource.subscribe(totalPrice => {
      this.cartprice = totalPrice;
    })
  }
}

I can console log it in the Oninit and the result shows up but when I use it in my cart.component.html file it does not.

This is my cart.component.html code where I use the "cartprice" variable

<h2>Checkout Page {{ cartprice }}</h2>

Any help would be appreciated.

Solution

Your components may be using a different instance of the same service. Register your service in your app.module.ts so they use the same service instance.

Answered By - Dennis