title: "Edit / Delete" button for each row & header column is 'Action' in the md-table component
body: <p>I am quite new in the angular 4 world and I'm trying to add  "Edit / Delete" button for each row &amp; header column is 'Action' in the md-table component in Angular Material design with Angular 4. how can I do this? customized header column &amp; buttons for each row. any template available to do this? below is my HTML code. </p>
  
  <p>userinfo.html </p>
  
  <pre><code>&lt;!-- ID Column --&gt;
  &lt;ng-container cdkColumnDef="username"&gt;
  &lt;md-header-cell *cdkHeaderCellDef&gt; User Name &lt;/md-header-cell&gt;
  &lt;md-cell *cdkCellDef="let row"&gt; {{row.username}} &lt;/md-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;!-- Email Column --&gt;
  &lt;ng-container cdkColumnDef="email"&gt;
  &lt;md-header-cell *cdkHeaderCellDef&gt; Email &lt;/md-header-cell&gt;
  &lt;md-cell *cdkCellDef="let row"&gt; {{row.email}} &lt;/md-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;!-- First Name Column --&gt;
  &lt;ng-container cdkColumnDef="userFirstName"&gt;
  &lt;md-header-cell *cdkHeaderCellDef&gt; First Name &lt;/md-header-cell&gt;
  &lt;md-cell *cdkCellDef="let row"&gt; {{row.userFirstName}} &lt;/md-cell&gt;
  &lt;/ng-container&gt;
  
  &lt;!-- Last Name Column --&gt;
  &lt;ng-container cdkColumnDef="userLastName"&gt;
  &lt;md-header-cell *cdkHeaderCellDef&gt; Last Name &lt;/md-header-cell&gt;
  &lt;md-cell *cdkCellDef="let row" [style.color]="row.color"&gt; {{row.userLastName}} &lt;/md-cell&gt;
  &lt;/ng-container&gt; 
  
  &lt;!-- Phone Column --&gt;
  &lt;ng-container cdkColumnDef="userMobile"&gt;
  &lt;md-header-cell *cdkHeaderCellDef&gt; Phone &lt;/md-header-cell&gt;
  &lt;md-cell *cdkCellDef="let row" &gt; {{row.userMobile}} &lt;/md-cell&gt;
  &lt;/ng-container&gt; 
  
  &lt;!-- Role Column --&gt;
  &lt;ng-container cdkColumnDef="authority"&gt;
  &lt;md-header-cell &gt; Role &lt;/md-header-cell&gt;
  &lt;md-cell *cdkCellDef="let row" &gt; {{row.authority}} &lt;/md-cell&gt;
  &lt;/ng-container&gt; 
  
  &lt;!-- Action Column 
  &lt;md-header-cell &gt; Action &lt;/md-header-cell&gt;
  &lt;md-cell  &gt; &lt;button md-raised-button &gt;Edit&lt;/button&gt; &lt;/md-cell&gt; --&gt;
  
  &lt;md-header-row *cdkHeaderRowDef="displayedColumns"&gt;&lt;/md-header-row&gt;
  &lt;md-row *cdkRowDef="let row; columns: displayedColumns;"&gt;&lt;/md-row&gt;
  </code></pre>