title: Angular CSS Row Hover Text Change
body: <p>New to Angular.  I'm trying to make an entire row change font color on hover.  I have the background color working fine, but I can only seem to get one cell to change color at a time, rather than all cells in the row. I'm using Material library and ng-container. </p>
  
  <pre><code>&lt;div&gt;
    &lt;table class="order-summary" mat-table [dataSource]="orderSummary" matSort&gt;
      &lt;ng-container matColumnDef="type"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Type&lt;/th&gt;
        &lt;td mat-cell *matCellDef="let order"&gt;&lt;fa-icon [icon]="getTypeIcon(order.type)"&gt;&lt;/fa-icon&gt;&lt;/td&gt;
      &lt;/ng-container&gt;
      &lt;mat-header-row *matHeaderRowDef="tableColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: tableColumns"&gt;&lt;/mat-row&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  .mat-row:hover{
    background-color: rgba(119, 119, 122, 0.1);
  }
  
  .mat-row:hover{
    color:  #FB792A;
  }
  
  </code></pre>