title: Mat Table:-How to get one particular element of a particular row on a button click in Mat table angular?
body: <p>Here is my <strong>Datatable.component.html</strong> I want to fetch the one particular item of a row let say "email" of a user in Table. How I can do this?</p>
  
  <pre><code>&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet"&gt;
  &lt;div class="search-div"&gt;
    &lt;button mat-raised-button routerLink="/auth/signup"&gt;
      &lt;mat-icon&gt;add&lt;/mat-icon&gt;Create
    &lt;/button&gt;
    &lt;mat-form-field class="search-form-field" floatLabel="never"&gt;
      &lt;input matInput [(ngModel)]="searchKey" placeholder="Search" autocomplete="off" (keyup)="applyFilter()"&gt;
      &lt;button mat-button matSuffix mat-icon-button aria-label="Clear"*ngIf="searchKey"  (click)="onSearchClear()"&gt;
        &lt;mat-icon&gt;close&lt;/mat-icon&gt;
      &lt;/button&gt;
    &lt;/mat-form-field&gt;
  &lt;/div&gt;
  &lt;div class="mat-elevation-z8"&gt;
    &lt;mat-table [dataSource]="listData"  matSort&gt;
      &lt;ng-container matColumnDef="firstName"&gt;
        &lt;mat-header-cell *matHeaderCellDef  mat-sort-header&gt;Full Name&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.firstName}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="email"&gt;
        &lt;mat-header-cell *matHeaderCellDef  mat-sort-header&gt;Email&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.email}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="mobile"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Mobile&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.phoneNum}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="city"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;City&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.city}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="LastName"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;LastName&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt;{{element.lastName}}&lt;/mat-cell&gt;
      &lt;/ng-container&gt;
       &lt;ng-container matColumnDef="actions"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt;&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let row"&gt;
          &lt;button mat-icon-button (click)="onEdit(row)"&gt;&lt;mat-icon&gt;launch&lt;/mat-icon&gt;&lt;/button&gt;
          &lt;button mat-icon-button color="warn" (click)="ondisbale(userId)"&gt;&lt;mat-icon&gt;delete_outline&lt;/mat-icon&gt;&lt;/button&gt;
        &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="loading"&gt;
        &lt;mat-footer-cell *matFooterCellDef colspan="6"&gt;
          Loading data...
        &lt;/mat-footer-cell&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="noData"&gt;
        &lt;mat-footer-cell *matFooterCellDef colspan="6"&gt;
          No data.
        &lt;/mat-footer-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-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':listData!=null}"&gt;&lt;/mat-footer-row&gt;
      &lt;mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(listData!=null &amp;&amp; listData.data.length==0)}"&gt;&lt;/mat-footer-row&gt;
    &lt;/mat-table&gt;
    &lt;mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;
  &lt;div class="container-fluid" style="position: fixed; bottom: 0px;background-color:ivory; padding:1rem; border-top-left-radius: 2rem; border-top-right-radius: 2rem;"&gt;
          &lt;div class="row justify-content-center"&gt;
            &lt;i class="fab fa-facebook-f" style="margin-right: 10px;"&gt;&lt;/i&gt;
            &lt;i class="fab fa-instagram" style="margin-right: 10px;margin-left: 10px; color: orchid"&gt;&lt;/i&gt;
            &lt;i class="fab fa-twitter" style="margin-right: 10px;margin-left: 10px; color: royalblue"&gt;&lt;/i&gt;
            &lt;i class="fab fa-reddit" style="margin-right: 10px;margin-left: 10px; color:orangered;"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class="row justify-content-center" style="margin-top: 20px;"&gt;
            Copyright @2019 All rights reserved
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>I don't know how to get it.Basically I added the button Delete_outline. Now on click it i want to get email of a partcular row which I have clicked? </p>