title: How to remove a row from an Angular Material table
body: <p>I have a shopping cart that I am implementing through an Angular Material table. Each row has a picture, description,..., and delete button. The problem is that when I click on the delete button the row does not disappear until all items are gone. I know the item IS being removed from the cart but not from the table unless I refresh or re-initialize the component. I added a div at the end with an *ngFor loop and when I click the delete button on the table row, the div displays the correct number of items but the table does not. A have a cart.model.ts, a cart.service.ts that handles the deletion (amongst other actions), and then the cart component. I could work with just css or a css library but I would rather find out how to solve this &quot;problem&quot;. Any help would be highly appreciated, thanks in advance!
  <a href="https://i.stack.imgur.com/LcXdv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LcXdv.png" alt="enter image description here" /></a></p>
  <p>cart.component.html</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;div class=&quot;mat-display-3&quot; style=&quot;background-color: #d6d6d6;
                padding: 20px;
                color: #a7181b;
                text-align: center;&quot; *ngIf=&quot;cart.length === 0&quot;&gt;
          Your cart is Empty!
      &lt;/div&gt;
      &lt;table mat-table [dataSource]=&quot;cart&quot; class=&quot;mat-elevation-z8&quot; *ngIf=&quot;cart.length &gt; 0&quot;&gt;
          &lt;ng-container matColumnDef=&quot;product&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; Product &lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let cartItem&quot;&gt; &lt;img src=&quot;{{ cartItem.image }}&quot; alt=&quot;{{ cartItem.name }}&quot;&gt; &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;ng-container matColumnDef=&quot;description&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; Description &lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let cartItem&quot;&gt;
                  &lt;p&gt;Name: {{ cartItem.name }}&lt;/p&gt;
                  &lt;p&gt;Type: {{ cartItem.type }}&lt;/p&gt;
                  &lt;p&gt;Size: {{ cartItem.size }}&lt;/p&gt;
              &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;ng-container matColumnDef=&quot;quantity&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; Quantity &lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let cartItem&quot;&gt; &lt;input type=&quot;number&quot; min=&quot;1&quot; max=&quot;10&quot; value=&quot;{{ cartItem.quantity }}&quot; [disabled]=&quot;cartItem.type==='original'&quot;&gt; &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;ng-container matColumnDef=&quot;price&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; Price &lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let cartItem&quot;&gt;
                  &lt;h2&gt;${{ cartItem.price }}.00&lt;/h2&gt;
              &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;ng-container matColumnDef=&quot;delete&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; Delete &lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let cartItem&quot;&gt; &lt;button mat-fab color=&quot;warn&quot; (click)=onDeleteProduct(cartItem.inCartProductId)&gt;&lt;mat-icon&gt;delete&lt;/mat-icon&gt;&lt;/button&gt; &lt;/td&gt;
          &lt;/ng-container&gt;
      
          &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
          &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
      &lt;/table&gt;
      &lt;div *ngFor=&quot;let x of cart&quot;&gt;
          &lt;p&gt;{{ x.name }}&lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  <p>cart.service.ts</p>
  <pre><code>  private cart: CartItem[] = [
    ]
  
    addToCart(name: string, type: string, image: string, size: string, quantity: number, price: number){
      let inCartProductId = this.cart.length &gt; 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 =&gt; {
        return p.inCartProductId === inCartProductId;
      });
      if(product){
        this.cart.splice(this.cart.map(p =&gt; p.inCartProductId).indexOf(inCartProductId), 1);
      }
    }
  }
  </code></pre>
  <p>cart-item.model.ts</p>
  <pre><code>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
    ){}
  }
  </code></pre>