Angular 7 and angular material changing row color of datasource table when its checked by a checkbox is allowing one row to be colored

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.

having this stackblitz, 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.

I used this function to get the id of the row:

changeColor(id)
   {
     this.coloredRow = id;
   }

And here is my material datasource table:

<table mat-table [dataSource]="dataSource" matSort matSorActive="unit_date_added" disableClear matSortDirection="asc"
    *ngIf="!showSpinner">
    <ng-container matColumnDef="select">
      <th mat-header-cell *matHeaderCellDef>

      </th>
      <td mat-cell *matCellDef="let row"  (click)="changeColor(row.location_id_auto)" >
        <mat-checkbox>
        </mat-checkbox>
      </td>
    </ng-container>
    <ng-container matColumnDef="hh_id">
      <th mat-header-cell *matHeaderCellDef>HH ID</th>
      <td class="alignTd" mat-header *matCellDef="let row">{{row.hh_id}}</td>
    </ng-container>
    <ng-container matColumnDef="unit_id">
      <th mat-header-cell *matHeaderCellDef>UNIT ID</th>
      <td class="alignTd" mat-header *matCellDef="let row">{{row.uid}}</td>
    </ng-container>

    <ng-container matColumnDef="name_en">
      <th mat-header-cell *matHeaderCellDef>Unit Type</th>
      <td mat-header *matCellDef="let row">{{row.name_en}}</td>
    </ng-container>

    <ng-container matColumnDef="location_id_auto">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-header *matCellDef="let row">{{row.location_id_auto}}</td>
    </ng-container>



    <tr class="example-expanded-row mat-column-name" mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr class="mat-column-name" mat-row *matRowDef="let row; let i = index; columns: displayedColumns;" [ngClass]="{'highlight2': coloredRow == row.location_id_auto}">

    </tr>
  </table>

And the css style:

.highlight2{
     background: #42A948; /* green */
   }

The current behavior is that only one row's color will be changed.

You want more than one row can change color? change your code to this: in the HTML:

<table mat-table [dataSource]="dataSource" matSort matSorActive="unit_date_added" disableClear matSortDirection="asc"
    *ngIf="!showSpinner">
    <ng-container matColumnDef="select">
      <th mat-header-cell *matHeaderCellDef>

      </th>
      <td mat-cell *matCellDef="let row"   >
        <mat-checkbox>
        </mat-checkbox>
      </td>
    </ng-container>
    <ng-container matColumnDef="hh_id">
      <th mat-header-cell *matHeaderCellDef>HH ID</th>
      <td class="alignTd" mat-header *matCellDef="let row">{{row.hh_id}}</td>
    </ng-container>
    <ng-container matColumnDef="unit_id">
      <th mat-header-cell *matHeaderCellDef>UNIT ID</th>
      <td class="alignTd" mat-header *matCellDef="let row">{{row.uid}}</td>
    </ng-container>

    <ng-container matColumnDef="name_en">
      <th mat-header-cell *matHeaderCellDef>Unit Type</th>
      <td mat-header *matCellDef="let row">{{row.name_en}}</td>
    </ng-container>

    <ng-container matColumnDef="location_id_auto">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-header *matCellDef="let row">{{row.location_id_auto}}</td>
    </ng-container>



    <tr class="example-expanded-row mat-column-name" mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr class="mat-column-name" mat-row (click)="changeColor(i)" *matRowDef="let row; index as i; columns: displayedColumns;" [ngClass]="{'highlight2': coloredRow[i] == true}">

    </tr>
  </table>

int the ts:

coloredRow:boolean[]=[];
changeColor(index)
  {
    this.coloredRow[index] =!this.coloredRow[index];
  }

Change row color in Angular Material table, I assume that you want to apply make-gold class when IsGranted value is true. If this is the case, try this: <mat-row *matRowDef="let row; columns:  My question is simple i want to know if there's a way to change the color of a row by doing a condition. for example i have my data as the image below: Is there a way i could use the "bad_provider" element to do a condition and if it turns out to be true i could change the row color to red?

Ideally I think you want to track whether the row is checked or not in your data array / your model. I modified your stackblitz with an additional property checked which gets set via the checkbox and upon which the coloring of the row is based.

The checked property is set via two-way data binding using ngModel:

<mat-checkbox [(ngModel)]="row.checked"></mat-checkbox>

Setting the color of the row is as before, just use the checked property of the current row:

<tr class="mat-column-name" mat-row *matRowDef="let row; let i = index; columns: displayedColumns;" [ngClass]="{'highlight2': row.checked}">

Show mat-table row dynamically after checking a checkbox, Angular 7 and angular material changing row color of datasource table when its checked by a checkbox is allowing one row to be colored - angular. data - angular material table row hover Angular 4 Material table highlight a row (3) I'm looking for a good way to hightlight the whole a row in md-table.

Here the solution.

Ive based it in this link also in https://material.angular.io/components/table/overview

Here's the code:

app.component.html

<table mat-table [dataSource]="dataSource" matSort matSorActive="unit_date_added" disableClear matSortDirection="asc"
    *ngIf="!showSpinner">
    <ng-container matColumnDef="select">
      <th mat-header-cell *matHeaderCellDef>

      </th>
      <td mat-cell *matCellDef="let row"  (click)="changeColor(row.location_id_auto)" >
        <mat-checkbox (click)="$event.stopPropagation()"
                    (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)"> 
        </mat-checkbox>
      </td>
    </ng-container>
    <ng-container matColumnDef="hh_id">
      <th mat-header-cell *matHeaderCellDef>HH ID</th>
      <td class="alignTd" mat-header *matCellDef="let row">{{row.hh_id}}</td>
    </ng-container>
    <ng-container matColumnDef="unit_id">
      <th mat-header-cell *matHeaderCellDef>UNIT ID</th>
      <td class="alignTd" mat-header *matCellDef="let row">{{row.uid}}</td>
    </ng-container>

    <ng-container matColumnDef="name_en">
      <th mat-header-cell *matHeaderCellDef>Unit Type</th>
      <td mat-header *matCellDef="let row">{{row.name_en}}</td>
    </ng-container>

    <ng-container matColumnDef="location_id_auto">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-header *matCellDef="let row">{{row.location_id_auto}}</td>
    </ng-container>



    <tr class="example-expanded-row mat-column-name" mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr class="mat-column-name" mat-row *matRowDef="let row; let i = index; columns: displayedColumns;" (click)="selection.toggle(row)" [ngClass]="{'highlight2': selection.isSelected(row)}">

    </tr>
  </table>

app.component.ts

import { Component } from '@angular/core';
import {MatTableDataSource} from '@angular/material';
import {SelectionModel} from '@angular/cdk/collections';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  coloredRow:any;
  selection = new SelectionModel(true, []);
  displayedColumns = ['select', 'location_id_auto', 'name_en'];
  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
  constructor(){}
  changeColor(id)
  {
    this.coloredRow = id;
  }
}

export interface Element {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: Element[] = [
  {location_id_auto: 1, name_en: 'Hydrogen', },
  {location_id_auto: 2, name_en: 'Helium'},
];

Ive just add a selection model.

Table, Show mat-table row dynamically after checking a checkbox - angular. Angular 7 and angular material changing row color of datasource table when its checked by a checkbox is allowing one row to be colored. I need to add a  This tutorial explores the Angular Material data table and how to use it! Join the full Angular Material course: https://acad.link/ng-app Exclusive discount also available for our Angular course

The Missing Guide to Angular Material, While an array is the simplest way to bind data into the data source, it is also the most limited. showing simple string values, but are flexible and allow you to provide any template. The following column definition is equivalent to the one above. Then add mat-header-row and mat-row to the content of your mat-table and  Project showcasing my CRUD (Create, Read, Update, Delete) implementation on Angular's Mat-Table. Most importantly frontend updates accordingly with operations. This is important if you're using data from backend (some DB like MySQL) but I guess It can be used for local generated data as well. Here's

Angular Grid Row Editing | UI Grid | Ignite UI for Angular, Captures the template of a column's data row cell as well as cell-specific Resets the dirty check for cases where the sticky state has been used without one table row); Stream that emits a data array each time the array changes Whether to allow multiple rows per data object by evaluating which rows evaluate their  UI component infrastructure and Material Design components for mobile and desktop Angular web applications.

Angular Grid Editing | Data Manipulation, Angular Material is built and maintained by the Angular team to Check out the repo: here. as it allows you to change your theming and pallets in one place and the To change the colors, palettes or switch from light to dark theme, it is color="primary" class="main-toolbar"> <mat-toolbar-row> <button  This article aims to explain one of the best components of Angular Material. This is the MatTableModule, which in principle is a component for generating tables with an object array.

Comments
  • First of all why you using checkboxes? You can just use the (click)="coloredRow = i" and [ngClass]="{'highlight2': coloredRow == i}"
  • I need to color multiple rows, and a user should be able to uncheck a row to remove the color
  • Hmm you can try (click)="row.color = !row.color" and [ngClass]="{'highlight2': row.color }"
  • There is only one single problem. When I go through pages in data table, and if I was selecting row index 1, at the next page, the first row will be highlighted too as it has 1 as index because it's in the second page
  • Is there a way, other than using [(ngModel)] ? That's exactly what I want, but I don't want to import FormsModule.
  • There is: <mat-checkbox [checked]="row.checked" (change)="row.checked = !row.checked"></mat-checkbox>. Even though I would suggest that you use ngModel as this is how the MatCheckbox is used in the examples over at material.angular.io/components/checkbox/examples