Update the value in local storage and display it on web page without refreshing the page

Question

I'm Currently working on Angular 8 project. I've a variable 'cartproductitems', what I want it to do update this variable as soon as user adds new product onto the cart. So that its number of items in the cart got updated. Everything is working fine except everytime I've to refresh my page whenever user adds new product into cart.

My HTML Code

   <div class="fw-700 mainNavCol" *ngIf="brand_Name!='Pipasha Restaurant'">
        <div class="fa-4x" style="position: relative !important;">
            <button class="btn-cart" (click)="callCheckout()"><i class="fa fa-shopping-cart"></i>
              <span class="hidden-phone">My Trolley</span>
            </button>
            <span class="fa-layers-counter" style="background:Tomato; font-size: xx-large;">{{(""+cartProductItems)?.length}}</span>
        </div>
      </div>

My TS Code

cartProductItems: number;
this.cartProductItems = this._requestService.getProductCartItems();
    console.log('cartProductItems -> '+this.cartProductItems);
  callCheckout() {
    let isTable: boolean = JSON.parse(this._local.get('isTable'));
    if(isTable){
      this._requestService.tableCheckout(this.cartProductItems);
    }
    else{
      this._requestService.checkout(this.cartProductItems);
    }
    console.log('callCheckout -> isTable -> '+isTable);
  }

Answer 1

Did you try to give your button the button-Type? If none is defined, at least some browsers use them as submit, which might cause a request to the server.