title: Angular Material Table - Apply dynamically background color to a row (Angular 2+)
body: <p>Hello I have an Angular application that displays in real time the status of processes running in a scheduler engine.
  I have the following table to display those processes:
  <a href="https://i.stack.imgur.com/o4Glb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o4Glb.png" alt="Table" /></a></p>
  <p>What I want is to dynamically change the row background color depending on the Status, like following:</p>
  <blockquote>
  <p>S (started) - White;</p>
  <p>W (working) - Blue;</p>
  <p>E (error) - Red;</p>
  <p>F (finished) - Green;</p>
  </blockquote>
  <p><strong>Html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;table mat-table [dataSource]=&quot;this.dataSource&quot; multiTemplateDataRows class=&quot;mat-elevation-z8&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;ng-container matColumnDef=&quot;expandedDetail&quot;&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot; [attr.colspan]=&quot;displayedColumns.length&quot;&gt;
        &lt;div class=&quot;example-element-detail&quot; [@detailExpand]=&quot;element == expandedElement ? 'expanded' : 'collapsed'&quot; *ngIf=&quot;log_message&quot;&gt;
          &lt;div class=&quot;example-element-description&quot;&gt;
            &lt;p *ngIf=&quot;this.log_message&quot;&gt;Log Message:&lt;/p&gt;
            &lt;p *ngIf=&quot;!this.log_message&quot;&gt;N/A&lt;/p&gt;
            &lt;pre *ngIf=&quot;this.log_message&quot;&gt; {{ this.log_message }} &lt;/pre&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef=&quot;UPD_DATE&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; UPD_DATE &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let data&quot;&gt; {{data.LAST_UPD_DATETIME}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef=&quot;S&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; S &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let data&quot;&gt; {{data.STATUS}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef=&quot;PROC&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; PROC &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let data&quot;&gt; {{data.PROC_ID}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef=&quot;AGENT&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; AGENT &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let data&quot;&gt; {{data.AGENT_ID}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef=&quot;SUBMIT_DATE&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; SUBMIT_DATE &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let data&quot;&gt; {{data.SUBMIT_DATE}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef=&quot;END_DATE&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; END_DATE &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let data&quot;&gt; {{data.END_DATE}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef=&quot;START_DATE&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; START_DATE &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let data&quot;&gt; {{data.START_DATE}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef=&quot;USER_SUBMIT&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; USER_SUBMIT &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let data&quot;&gt; {{data.USER_SUBMIT}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef=&quot;THREAD_NUM&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; THREAD_NUM &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let data&quot;&gt; {{data.THREAD_NUM}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef=&quot;INSTANCE_ID&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; INSTANCE_ID &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let data&quot;&gt; {{data.INSTANCE_ID}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef=&quot;START&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; START &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt;&lt;button class=&quot;btn btn-success&quot; (click)=&quot;onStart(row)&quot; [disabled]=&quot;this.started&quot;&gt;Start&lt;/button&gt;&lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef=&quot;STOP&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; STOP &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt;&lt;button class=&quot;btn btn-danger&quot; (click)=&quot;onStop()&quot;&gt;Stop&lt;/button&gt;&lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef=&quot;LOG&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; LOG &lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let row&quot;&gt;&lt;button class=&quot;btn btn-info&quot; (click)=&quot;onLog()&quot;&gt;Log&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 element; columns: displayedColumns;&quot; class=&quot;example-element-row&quot;
      [class.example-expanded-row]=&quot;expandedElement === element&quot; (click)=&quot;log_message = onElementExpand(element); expandedElement = element;&quot;&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef=&quot;let row; columns: ['expandedDetail']&quot; class=&quot;example-detail-row&quot;&gt;&lt;/tr&gt;
  &lt;/table&gt;
   
  &lt;mat-toolbar&gt;
      &lt;mat-toolbar-row&gt;
          &lt;button class=&quot;btn btn-primary&quot; (click)=&quot;getIpeProcessInstances()&quot; [disabled]=&quot;false&quot;&gt;{{ 'button.Refresh' | translate }}&lt;/button&gt;
        &lt;span class=&quot;example-spacer&quot;&gt;&lt;/span&gt;
        &lt;mat-paginator [pageSizeOptions]=&quot;[5, 10, 20]&quot; showFirstLastButtons&gt;&lt;/mat-paginator&gt;
      &lt;/mat-toolbar-row&gt;
  &lt;/mat-toolbar&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre class="lang-css prettyprint-override"><code>table {
    width: 100%;
  }
  
  tr.example-detail-row {
    height: 0;
  }
  
  
  tr.example-element-row:not(.example-expanded-row):hover {
    background: #f5f5f5;
  }
  
  tr.example-element-row:not(.example-expanded-row):active {
    background: #efefef;
  }
  
  .example-element-row td {
    border-bottom-width: 0;
  }
  
  .example-element-detail {
    overflow: hidden;
    display: flex;
  }
  
  .example-element-diagram {
    min-width: 80px;
    border: 2px solid black;
    padding: 8px;
    font-weight: lighter;
    margin: 8px 0;
    height: 104px;
  }
  
  .example-element-symbol {
    font-weight: bold;
    font-size: 40px;
    line-height: normal;
  }
  
  .example-element-description {
    padding: 16px;
  }
  
  .example-element-description-attribution {
    opacity: 0.5;
  }
  
  .mat-elevation-z8 {
    width: 100%;
  }
  
  .mat-row:hover {
    background-color: whitesmoke;
  }
  
  .example-icon {
    padding: 0 14px;
  }
  
  .example-spacer {
    flex: 1 1 auto;
  }
  
  .mat-paginator
  {
    background-color: whitesmoke;
  }
  </code></pre>
  <p>So based on the Status filed, how I can dinamicly change the row color?
  Thank you!</p>