I am currently working on a shopping cart feature using an Angular Material table. Each row in the table displays a picture, description, and a delete button. However, I'm facing an issue where clicking the delete button does not remove the row from the table until all items are deleted. Although the item is successfully removed from the cart, it doesn't reflect in the table unless I refresh or re-initialize the component. I tried adding a div with an *ngFor loop at the end, which correctly displays the number of items when a delete action is performed, but the table still fails to update accordingly. My setup includes a cart.model.ts file, a cart.service.ts for handling actions like deletion, and the cart component itself. While I could resort to CSS modifications or libraries, I'd prefer to address this "problem" directly. Any assistance on resolving this issue would be greatly appreciated. Thank you in advance! https://i.sstatic.net/LcXdv.png
cart.component.html
<div class="mat-display-3" style="background-color: #d6d6d6;
padding: 20px;
color: #a7181b;
text-align: center;" *ngIf="cart.length === 0">
Your cart is Empty!
</div>
<table mat-table [dataSource]="cart" class="mat-elevation-z8" *ngIf="cart.length > 0">
<ng-container matColumnDef="product">
<th mat-header-cell *matHeaderCellDef> Product </th>
<td mat-cell *matCellDef="let cartItem"> <img src="{{ cartItem.image }}" alt="{{ cartItem.name }}"> </td>
</ng-container>
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef> Description </th>
<td mat-cell *matCellDef="let cartItem">
<p>Name: {{ cartItem.name }}</p>
<p>Type: {{ cartItem.type }}</p>
<p>Size: {{ cartItem.size }}</p>
</td>
</ng-container>
<ng-container matColumnDef="quantity">
<th mat-header-cell *matHeaderCellDef> Quantity </th>
<td mat-cell *matCellDef="let cartItem"> <input type="number" min="1" max="10" value="{{ cartItem.quantity }}" [disabled]="cartItem.type==='original'"> </td>
</ng-container>
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef> Price </th>
<td mat-cell *matCellDef="let cartItem">
<h2>${{ cartItem.price }}.00</h2>
</td>
</ng-container>
<ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef> Delete </th>
<td mat-cell *matCellDef="let cartItem"> <button mat-fab color="warn" (click)=onDeleteProduct(cartItem.inCartProductId)><mat-icon>delete</mat-icon></button> </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<div *ngFor="let x of cart">
<p>{{ x.name }}</p>
</div>
cart.service.ts
private cart: CartItem[] = [
]
addToCart(name: string, type: string, image: string, size: string, quantity: number, price: number){
let inCartProductId = this.cart.length > 0 ? this.cart[this.cart.length-1].inCartProductId+1 : 1;
this.cart.push({inCartProductId: inCartProductId, name: name, type: type, image: image, size: size, quantity: quantity, price: price});
}
getCart(){
return this.cart;
}
deleteFromCart(inCartProductId: number){
const product = this.cart.find(p => {
return p.inCartProductId === inCartProductId;
});
if(product){
this.cart.splice(this.cart.map(p => p.inCartProductId).indexOf(inCartProductId), 1);
}
}
}
cart-item.model.ts
export class CartItem {
constructor(
public inCartProductId: number,
public name: string,
public type: string,
public image: string,
public size: string,
public quantity: number,
public price: number
){}
}