Angular Emptying A Shopping Cart - json

Question

Hello I have a shopping cart which I am able to add products as well as delete products using a api . When deleting an item from cart it has to be deleted using a button click on each item by id, one by one. which is fine for that purpose, but I am trying to do empty all items in cart url from a function not a button which has not worked for me because id will be undefined.
My question is, if this is even possible? I have tried clearing the array of items such as cartItems.length = 0 or cartItems = [] this only empties a copy of the array from my understanding, so therefore the items will still exist in the cart from what I have tried.
I'm reaching out to see if anyone can answer this and point me in the right direction it will be greatly appreciated. I have included a snippet of of html and the cart service for the delete item.
cart service
RemoveProductFromCart(id:number):Observable<void>{
return this.http.delete<CartItem[]>(`${this.cartUrl}/${id}`)
.pipe(catchError(_err => of (null))
);
}
cartitem.ts
handleRemoveFromCart(){
alert("hit remove from cart");
this.cartService.RemoveProductFromCart(this.cartItem.id)
.subscribe(() =>
console.log("Product with Id deleted",
this.cartItem.id),
(err) => console.log(err)
);
}
html for cartitem
<div class="container-md" >
<div>
<img class="img-fluid" [src]="cartItem.imageUrl" style="padding-bottom:5px; padding-top:50px" alt="Cart">
<div class="text-nowrap" style="font-size:13px; width: 400px">{{cartItem.productName}}</div>
{{cartItem?.size}}{{Valuesize}}
<div style="font-size:13px;"><strong>{{ (cartItem.price) | currency}}</strong></div>
<div class=" float-right">
<span><i class="fa-solid fa-trash-can" style="color:#D30169; cursor: pointer;" (click)="handleRemoveFromCart();handleReload()"></i></span>
</div>
</div>
</div>
cart html
<div *ngIf="cartItems.length === 0"class="alert alert-
info">Your Cart is Empty</div>
<div *ngIf="product">
<div>{{product.name}}</div>
<input type="number" [(ngModel)]="product.num"
min="0"/>
</div>
<div *ngFor="let item of cartItems; let i = index">
<app-cart-item [cartItem]="item"></app-cart-item>
</div>
<li class="list-group-item" style="margin-top:30px;">
<strong>Total Items {{itemTotal}}</strong>
</li>
<li class="list-group-item active">
<strong>Total: {{ cartTotal | currency}}</strong>
</li>
<li class="btn btn-primary" style="height: 40px;
width:210px; margin-top:20px; color:ffffff">
<a class="" routerLink="/clothing" style="color:
#ffffff; cursor: pointer;">Continue
Shopping</a>
</li>
<li class= "btn" style="height: 40px; width:210px;
margin-top: 20px; background-color:#D30169">
<a class="" routerLink="/checkout" style="color:
#ffffff">Go To Checkout</a>
</li>
</div>
</div>
</div

Answer 1

Have a look into Rxjs
cart.service.ts
Create a behavior subject of cart items
cartItems$ = new BehaviorSubject<CartItem>([]);
To clear all the items
clearCart() {
this.cartItems$.next([]);
}
To add or remove an item
addToCart(cartItem: CartItem) {
this.cartItems$.next([cartItem, ...this.cartItems.getValue()]);
}
removeFromCart(cartItemId: string) {
this.cartItems$.next([this.cartItems.getValue().filter((cartItem) => cartItem.id !== cartItemId)]);
}
cartItem.ts
To subscribe to cartItems
cartItems:CartItem[] = []
constructor(private cartService: CartService) {
this.cartService.cartItems$.subscribe((v) => (this.cartItems = v));
}
Don't forget to unsubscribe