0

I have many components displaying single or multiple products provided by a service.

getProducts() {
    return this.http.get('/api/products');
}

getProduct(id) {
    return this.http.get('/api/product/'+id);
}

In some components, I can add new products or edit them using this service.

saveProduct(product) {
    if(product._id) {
        return this.http.put('/api/product/'+product._id, product);
    }

    return this.http.post('/api/product', product);
}

These components are displayed simultaneously but not directly connected to each other. So, whenever a change occurs, I need to notify all other components about this change.

I think observables are the way to go, but I'm not sure how to get started.

What is the right way to keep data maintained throughout my app?

  • My application is also a shopping cart. In my app, all CRUD operations are done in main. I use Even Emitter to add and delete products to cart. This updates the total items, total price without reloading the app. If you are using a lot of reusable components, I suggest you use resolve. I hope this help. – harold_mean2 Jun 23 '18 at 22:45

2 Answers2

1

If your objective is to multicast the data use RXJS's Subject or BehaviorSubject Subject acts as a bridge/proxy between the source Observable and many observers, making it possible for multiple observers to share the same Observable execution.

Advantages of BehaviorSubject over Subject

  1. It will always return the current value on subscription - there is no need to call onnext().
  2. It has a getValue() function to extract the last value as raw data.
  3. It ensures that the component always receives the most recent data.
  4. you can get an observable from behavior subject using the asobservable() method on BehaviorSubject.
  5. Subject vs BehaviorSubject

Service

private firstResponse=new BehaviorSubject<any>('');
 private secondResponse=new BehaviorSubject<any>('');
      CurrentDatafirst = this.firstResponse.asObservable();
      CurrentDatasecond = this.secondResponse.asObservable();

   getProducts() {
    return this.http.get('/api/products').
      subscribe(result=>this.firstResponse.next(result));//push data into observable
}

getProduct(id) {
    return this.http.get('/api/product/'+id).
           subscribe(result=>this.secondResponse.next(result));//push data into observable
}

Component1:

ngOnInit()
{
  this.CurrentDatafirst.subscribe(//value=>your logic);
  this.CurrentDatasecond.subscribe(//value=>your logic)

}

Component2:

 ngOnInit()
    {
      this.CurrentDatafirst.subscribe(//value=>your logic);
      this.CurrentDatasecond.subscribe(//value=>your logic)

    }
Vikas
  • 11,859
  • 7
  • 45
  • 69
  • Hi if the provided answer or any answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this:) – Vikas Jun 24 '18 at 18:24
  • Great answer, I'll definitely use this technique in the future. But I guess I'll go with ngrx for my current use case. –  Jun 24 '18 at 19:33
-1

What you are looking for is a store. The most famous one is Redux which is used in nearly every React application. Angular has its own alternative, based on Redux and called ngrx store.

Eld0w
  • 834
  • 6
  • 12