How to update product quantity after adding product to cart? - django

Question

I am working on a shopping cart project which is developed using angular and django. I want to update the qty of product when adding a product. but now the qty is updated when page is refreshed.
Below code i have been tried so far.
Home.Component.ts:
async ngOnInit() {
await this.getUpdatedCart();}
ngOnDestroy() {
this.subscription.unsubscribe();}
async getUpdatedCart() {
await this.cartService.getCart(this.products);
this.subscription = this.cartService.updatedCart
.subscribe(cart => {
this.cart = cart;
console.log('cart', this.cart);
});
}
shopping-cart.services.ts:
updatedCart = new BehaviorSubject<any>('');
async getCart(product) {
const cartId = JSON.parse(localStorage.getItem('cartId'));
if (cartId) {
this.http.get(this.globalService.baseUrl + 'shopping-cart/' + cartId + '/').subscribe(data => this.updatedCart.next(data));
}}
product-card.component.ts:
export class ProductCardComponent {
#Input('product') product;
#Input('shopping-cart') shoppingCart;
constructor(private cartService: ShoppingCartService,
private homeComponent: HomeComponent) {
}
async addToCart(product) {
await this.cartService.addProductToCart(product);
await this.homeComponent.getUpdatedCart();
}
getQuantity() {
if (!this.shoppingCart) {
return 0;
}
const item = this.shoppingCart.carts;
for (let i = 0; i < item.length; i++) {
if (item[i].product === this.product.id) {
return item[i].qty;
}
}
return 0;}}
product-card.component.html:
<div class="card-footer">
<button (click)="addToCart(product) " class="btn btn-primary btn-
block">Add to cart</button>
<div>{{getQuantity() }}</div>
</div>
</div>
I want when user click "add to cart" button then the quantity will be updated.
but quantity is updated after i click the button twice.

Answer 1

Use Subjects (Example) in this case. Make a service in shopping-cart.services.ts and fetch cart data from there. You will get the updated cart on subscription of that cart.