How to fix my ion badge for cart is not updating in real time and requires navigation from other pages to be updated?

whenever i add any product in the cart, the shopping cart icon doesn’t update in real time to show that a product is added but needs a refresh of the view by navigating to any other page and coming back then only the ion -badge value is set 1.

<button ion-button icon-only (click)="cart()">    
<ion-icon name="cart"></ion-icon>
<ion-badge id="notifications-badge" style="font-size:1rem" *ngif="ccount">{{ccount}}</ion-badge>
</button>


//SETTING CART LENGTH

    this.storage.get('products').then((data) => {
      if(data != null)
        this.ccount = data.length;
      else
        this.ccount = 0;
    });

//code after pressing the add to cart button

showAlert() {
      let alert = this.alertCtrl.create({
        title: 'Product Added!',
      subTitle: 'Added To Cart Successfully!',
      buttons: ['OK']
    });
this.updateStorage(this.productdetail).catch(reason = console.error(reason));
      alert.present();
      this.changeDetector.detectChanges();
  }

Hello,
I suspect a timming problem.
let alert = this.alertCtrl.create({ is a asyncrouns call and is not awaited
this.updateStorage(this.productdetail).catch returns a promise
alert.present(); is a asyncrouns call and is not awaited
this.changeDetector.detectChanges(); maybe the try to fix timming problem with that?

this.storage.get(‘products’).then((data) => { is a promise

async calls return the controll to caller, so the next line of code will executed, but the async call will be executed anywhen.
promises are simillar.

For example: this.alertCtrl.create is exectued async, in between it exectues the next lines of your code. If your async call is not fix enougt, the line alert.present crash with undefined error, because let alert has no value at that time.

Best regards, anna-liebt