title: How to delete particular row from angular material table which doesnt have filters?
body: <p>My samplepage.component.ts</p>
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-batchticketvalidation',
    templateUrl: './batchticketvalidation.component.html',
    styleUrls: ['./batchticketvalidation.component.css']
  })
  export class BatchticketvalidationComponent {
  
    constructor() { }
  
    displayedColumns = ['id', 'ticketnumb', 'actionsColumn'];
    dataSource: PeriodicElement[] = ELEMENT_DATA;
    private myDataArray: any;
  
    deleteTicket(rowid: number) {
      if (rowid &gt; -1) {
        this.myDataArray.splice(rowid, 1);
      }
    }
  }
  
  export interface PeriodicElement {
    id: number;
    ticketnumb: string;
    actionsColumn: any;
  }
  
  const ELEMENT_DATA: PeriodicElement[] = [
  ];
  
  </code></pre>
  <p>My samplepage.component.html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;table mat-table [dataSource]=&quot;myDataArray&quot; &gt;
     &lt;!-- &lt;ng-container [matColumnDef]=&quot;column&quot; *ngFor=&quot;let column of displayedColumns&quot; &gt;
        &lt;th mat-header-cell *matHeaderCellDef &gt; {{column}} &lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let element&quot; &gt; {{element[column]}} &lt;/td&gt;
        &lt;/ng-container&gt; --&gt;
  
     &lt;ng-container matColumnDef=&quot;id&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Id. &lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let element; let i = index;&quot;&gt; {{i+1}} &lt;/td&gt;
     &lt;/ng-container&gt;
  
     &lt;ng-container matColumnDef=&quot;ticketnumb&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Ticket Number &lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.ticketnumb}} &lt;/td&gt;
     &lt;/ng-container&gt;
  
     &lt;ng-container matColumnDef=&quot;actionsColumn&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Action &lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let element;  let j = index;&quot;&gt; 
           &lt;button mat-raised-button  color=&quot;warn&quot; focusable=&quot;false&quot; (click)=&quot;deleteTicket(j)&quot;&gt;
           &lt;i class=&quot;fa fa-times mat-icon&quot;&gt;&lt;/i&gt; Remove
           &lt;/button&gt;
        &lt;/td&gt;
     &lt;/ng-container&gt;
  
     &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns; sticky: true&quot;&gt;&lt;/tr&gt;
     &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <p>I am new to angular. I need help in removing particular row from the table and once the row is removed the table should get refresh or it should show the existing data. I have only static rows. This is just a plain mockup html that i want to show to the client.</p>
  <p>Each row has delete button and on click of delete button I am calling deleteTicket(rowid).</p>
  <p>When deleteTicket method is triggered, the row is <strong>not removed</strong> from Ui, but when i console this.myDataArray, the data is removed from object.</p>
  <p>I tried all possibilities.</p>