title: Angular 7 and angular material changing row color of datasource table when its checked by a checkbox is allowing one row to be colored
body: <p>I need to add a checkbox to material table showing multiple rows of data and if a user checked it, the full row should change color to a green or something else.</p>
  
  <p>having this <a href="https://stackblitz.com/edit/angular-material-table-data-source-borrea" rel="nofollow noreferrer">stackblitz</a>, if a user selects one row, it will turn green, and if he selected another one, the previous will turn off, and the new will be colored.</p>
  
  <p>I used this function to get the id of the row:</p>
  
  <pre><code>changeColor(id)
     {
       this.coloredRow = id;
     }
  </code></pre>
  
  <p>And here is my material datasource table:</p>
  
  <pre><code>&lt;table mat-table [dataSource]="dataSource" matSort matSorActive="unit_date_added" disableClear matSortDirection="asc"
      *ngIf="!showSpinner"&gt;
      &lt;ng-container matColumnDef="select"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;
  
        &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let row"  (click)="changeColor(row.location_id_auto)" &gt;
          &lt;mat-checkbox&gt;
          &lt;/mat-checkbox&gt;
        &lt;/td&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="hh_id"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;HH ID&lt;/th&gt;
        &lt;td class="alignTd" mat-header *matCellDef="let row"&gt;{{row.hh_id}}&lt;/td&gt;
      &lt;/ng-container&gt;
      &lt;ng-container matColumnDef="unit_id"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;UNIT ID&lt;/th&gt;
        &lt;td class="alignTd" mat-header *matCellDef="let row"&gt;{{row.uid}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="name_en"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;Unit Type&lt;/th&gt;
        &lt;td mat-header *matCellDef="let row"&gt;{{row.name_en}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="location_id_auto"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt;Name&lt;/th&gt;
        &lt;td mat-header *matCellDef="let row"&gt;{{row.location_id_auto}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
  
  
      &lt;tr class="example-expanded-row mat-column-name" mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
      &lt;tr class="mat-column-name" mat-row *matRowDef="let row; let i = index; columns: displayedColumns;" [ngClass]="{'highlight2': coloredRow == row.location_id_auto}"&gt;
  
      &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>And the css style:</p>
  
  <pre><code>.highlight2{
       background: #42A948; /* green */
     }
  </code></pre>
  
  <p>The current behavior is that only one row's color will be changed.</p>