title: Angular 4 Material table highlight a row
body: <p>I'm looking for a good way to highlight the whole a row in <code>md-table</code>.<br />
  Should I do directive or what?</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;example-container mat-elevation-z8&quot;&gt;
    &lt;md-table #table [dataSource]=&quot;dataSource&quot;&gt;
  
      &lt;!--- Note that these columns can be defined in any order.
            The actual rendered columns are set as a property on the row definition&quot; --&gt;
  
      &lt;!-- ID Column --&gt;
      &lt;ng-container cdkColumnDef=&quot;userId&quot;&gt;
        &lt;md-header-cell *cdkHeaderCellDef&gt; ID &lt;/md-header-cell&gt;
        &lt;md-cell *cdkCellDef=&quot;let row&quot;&gt; {{row.id}} &lt;/md-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Progress Column --&gt;
      &lt;ng-container cdkColumnDef=&quot;progress&quot;&gt;
        &lt;md-header-cell *cdkHeaderCellDef&gt; Progress &lt;/md-header-cell&gt;
        &lt;md-cell *cdkCellDef=&quot;let row&quot;&gt; {{row.progress}}% &lt;/md-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Name Column --&gt;
      &lt;ng-container cdkColumnDef=&quot;userName&quot;&gt;
        &lt;md-header-cell *cdkHeaderCellDef&gt; Name &lt;/md-header-cell&gt;
        &lt;md-cell *cdkCellDef=&quot;let row&quot;&gt; {{row.name}} &lt;/md-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Color Column --&gt;
      &lt;ng-container cdkColumnDef=&quot;color&quot;&gt;
        &lt;md-header-cell *cdkHeaderCellDef&gt;Color&lt;/md-header-cell&gt;
        &lt;md-cell *cdkCellDef=&quot;let row&quot; [style.color]=&quot;row.color&quot;&gt; {{row.color}} &lt;/md-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;md-header-row *cdkHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/md-header-row&gt;
      &lt;md-row *cdkRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/md-row&gt;
    &lt;/md-table&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Table from: <a href="https://material.angular.io/components/table/overview" rel="noreferrer">https://material.angular.io/components/table/overview</a></p>