title: Remove object from arraylist displayed in a mat-table in Angular
body: <p>From a mat-table I wish to remove a single row. This is what my button and (click) method looks like:</p>
  
  <pre><code>    &lt;mat-cell *matCellDef="let element; let i = index"&gt;
            &lt;button mat-raised-button color="warn" (click)="deleteApplication(i)"&gt;
                 Delete
            &lt;/button&gt;
       &lt;/mat-cell&gt;
  </code></pre>
  
  <p>This is the function in my component.ts: </p>
  
  <pre><code>    deleteApplication(index: number){
      if (index &gt; -1) {
          let removeIndex = this.applicationData.Items;
              this.applicationData.Items.splice(removeIndex[index], 1);
              removeIndex = new MatTableDataSource(removeIndex);
              console.log('new array:', removeIndex.filteredData);
         }
      }
  </code></pre>
  
  <p>The datasource is a arraylist from my DynamoDB database hosted on AWS. This is what the it looks like, in my console:</p>
  
  <pre><code>    {Items: Array(8), Count: 8, ScannedCount: 8}
      Count: 8
      Items: Array(8)
      0: {completed: false, candidate: "1", application: Array(3), timestamp: 1569837830615}
      1: {completed: false, candidate: "2", application: Array(3), timestamp: 1569837830615}
      2: {completed: false, candidate: "3", application: Array(3), timestamp: 1569837830615}
      3: {completed: false, candidate: "4", application: Array(3), timestamp: 1569837830615}
      4: {completed: false, candidate: "5", application: Array(3), timestamp: 1569837830615}
      5: {completed: false, candidate: "6", application: Array(3), timestamp: 1569837830615}
      6: {completed: false, candidate: "7", application: Array(3), timestamp: 1569837830615}
      7: {completed: false, candidate: "8", application: Array(3), timestamp: 1569837830615}
      length: 8
      __proto__: Array(0)
      ScannedCount: 8
      __proto__: Object
  </code></pre>
  
  <p>My problem is that when I hit the delete button on a given row are:</p>
  
  <ol>
  <li><p>It is always index number 0 that get removed, even if I hit a row that is not on index 0</p></li>
  <li><p>My view doesn't render, i.e the deleted row does not disappear</p></li>
  </ol>