Currently, I am working on a project using Angular 8. One of the issues I am facing is with a variable called 'cartproductitems'. I want this variable to update automatically whenever a user adds a new product to the cart, so that the number of items in the cart gets updated. Everything works fine except for the fact that I have to manually refresh the page every time a new product is added to the cart.
HTML Code Snippet
<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>
TypeScript Code Snippet
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);
}