title: How to delete mat-row from mat-table material design table
body: <p>I am using Angular Material's table component to display data, which is from an API. How do I delete a record of data from a table row?</p>
  
  <p>HTML template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;mat-table [dataSource]="dataSource" #table&gt;
      &lt;ng-container matColumnDef="userId"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Name &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let user"&gt; {{user.userId}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="id"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; E-Mail &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let user"&gt; {{user.id}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="title"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Phone &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let user"&gt; {{user.title}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="body"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Company &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let user"&gt; {{user.body}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="remove"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt;
          &lt;button mat-icon-button (click)="removeAll()" matTooltip="Remove all"&gt;
            &lt;mat-icon&gt;clear_all&lt;/mat-icon&gt;
          &lt;/button&gt;
        &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let user; let i = index;"&gt;
          &lt;button mat-icon-button (click)="removeAt(i)" matTooltip="Remove this score"&gt;
            &lt;mat-icon&gt;clear&lt;/mat-icon&gt;
          &lt;/button&gt;
        &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
      &lt;/mat-table&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p><code>user.component.ts</code>:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { from } from 'rxjs/internal/observable/from';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/observable/of';
  import { DataSource } from '@angular/cdk/collections';
  import { SummaryService } from './summary.service';
  import { User } from './user';
  
  @Component({
    selector: 'app-summary',
    templateUrl: './summary.component.html',
    styleUrls: ['./summary.component.scss']
  })
  
  export class SummaryComponent implements OnInit {
  
    dataSource = new UserDataSource(this.summaryService);
    displayedColumns = ['userId', 'id', 'title', 'body', 'remove'];
    usersList: Observable&lt;User[]&gt;;
    constructor(private summaryService: SummaryService) { }
  
    ngOnInit() {
  
    }
  }
  
  export class UserDataSource extends DataSource&lt;any&gt; {
    constructor(private userService: SummaryService) {
      super();
    }
    connect(): Observable&lt;User[]&gt; {
      return this.userService.getUsers();
  
    }
    disconnect() { }
  }
  </code></pre>
  
  <p><code>summary.service.ts</code>:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
  import { Observable } from 'rxjs/internal/Observable';
  import { User } from './user';
  import 'rxjs/add/operator/map';
  
  @Injectable(
    //providedIn: 'root'
  )
  export class SummaryService {
    public baseurl = 'https://jsonplaceholder.typicode.com/posts'
    constructor(private http: HttpClient) { }
    getUsers(): Observable&lt;User[]&gt; {
      return this.http.get&lt;User[]&gt;(this.baseurl);
    }
  }
  </code></pre>