title: How to delete mat-row from mat-table material design
body: <p>Currently am using angular material design mat-table. Kindly help me to delete a record of data from mat-table.</p>
  
  <p>Here is the code:</p>
  
  <pre class="lang-html prettyprint-override"><code>            &lt;mat-table #table [dataSource]="dataSource" matSort slimScroll width="auto" height="450px" color="rgba(0,0,0,0.3)" size="3px"&gt;
                      &lt;!-- modelName Column --&gt;
                      &lt;ng-container matColumnDef="modelname"&gt;
                      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Name &lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let element" data-toggle="modal" data-target="#deviceView"&gt; &lt;span&gt;{{element.modelname}}&lt;/span&gt; &lt;/mat-cell&gt;
                      &lt;/ng-container&gt;
  
                      &lt;!-- modelNumber Column --&gt;
                      &lt;ng-container matColumnDef="modelnumber"&gt;
                      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Number &lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let element" data-toggle="modal" data-target="#deviceView"&gt; &lt;span&gt;{{element.modelnumber}}&lt;/span&gt; &lt;/mat-cell&gt;
                      &lt;/ng-container&gt;
  
                      &lt;!-- manufacturer Column --&gt;
                      &lt;ng-container matColumnDef="manufacturer"&gt;
                      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Manufac &lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let element" data-toggle="modal" data-target="#deviceView"&gt; &lt;span&gt;{{element.manufacturer}}&lt;/span&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; let i = index;" id="{{row.uuid}}" (click)="displayData(row.uuid); deleterow(index)"&gt;&lt;/mat-row&gt;
                  &lt;/mat-table&gt;
  
                  &lt;div class="table-page"&gt;
                      &lt;mat-paginator [length]="length" [pageSize]="1000" (page)="pageEvent = $event; onPaginateChange($event)"&gt;
                      &lt;/mat-paginator&gt;
                      &lt;div *ngIf="!pageEvent" class="pageformat text-primary"&gt;
                          {{pageSize}} / {{length}}
                      &lt;/div&gt;
  
  
                      &lt;div *ngIf="pageEvent" class="pageformat text-primary"&gt;
                          &lt;div *ngIf="pageEvent.length &gt;= pageEvent.pageSize * pageEvent.pageIndex + pageEvent.pageSize"&gt;{{pageEvent.pageSize * pageEvent.pageIndex + pageEvent.pageSize}} / {{pageEvent.length}}&lt;/div&gt;
                           &lt;div *ngIf="pageEvent.length &lt;= pageEvent.pageSize * pageEvent.pageIndex + pageEvent.pageSize"&gt;{{pageEvent.length}} / {{pageEvent.length}}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  </code></pre>
  
  <p>Kindly check and let me know any suggestions.</p>