Ionic 4/5 update count on tab bar after specific actions performed on the tabs

Ionic Framework
1

I am building a simple add to cart with ionic. I have 5 tabs. The 5th tab displays added products to the cart.

On the other 4 tabs, the user can add to the cart. (post request is made to API)

On ion-tab-button on tab-bar, I am displaying count that comes from API’s like below

tabbar.html

<ion-tab-bar>
// other 4 tabs
  <ion-tab-button tab="tab5" (click)="tab5()">
      <ion-icon class="icon" name="cart-outline"></ion-icon>
      <ion-badge class="badge" color="danger">{{count | async}}</ion-badge>
      <ion-label>Cart</ion-label>

   </ion-tab-button>
  </ion-tab-bar>

tabbar.ts

getcartCount(id) { // called on ngOnInit

    this.count = this.cartService.getCartCount(id).pipe(
      map(data => data.count)
    )
  }

service.ts

getCartCount (id): Observable<any> {
    return this.http.get<any>(this.cart_url + 'users/' + id + '/carts/count')

  }

Now when the user adds or deletes a product to/from the cart I want to make an API request on the tab bar page to update count. But I am getting how to do it? Do I need to use ngRx state management or some other way around?

Thank you in advance.

2

2 ways.

  1. When your user adds to cart, it will trigger an API call to your BE to save the item, when the API calls return 200, u update your cart count by 1 in the code itself.
  2. Make your cart count to subject and observable using rxjs, so that whenever your user adds an item to the cart, u will trigger your subject to broadcast out new cart count to all subscribing observables.

Hope this helps.