CODEWITHSUNDEEP
javascripthtmlangular
LDB
LDB

Reputation: 611

Conditionally change color of table data Angular 2+

I want to be able to highlight a specific td if a certain condition is met. 

<tr *ngFor="let prospect of deployment">
                    <td>{{prospect.campaignName}} | {{prospect.campaignId}}</td>
                    <td>{{prospect.dealerName}} | {{prospect.dealerId}}</td>                
                    <td class="group-added">{{prospect.addedDate | date : 'shortDate' }}</td>
                    <td class="group-added" style="text-align: right;">{{prospect.addedProspects | number}}</td>
                    <td class="group-processed">{{prospect.startedDate | date : 'shortDate' }}</td>
                    <td class="group-processed">{{prospect.stage}}</td>                
                    <td class="group-processed" style="text-align: right;">{{prospect.processedProspects | number}}</td>
                    <td class="group-processed" style="text-align: right;">{{prospect.emailsSent | number}}</td>
                    <td class="group-processed" style="text-align: right;">{{prospect.emailsError | number}}</td>
                    <td *ngIf="perms.has(perms.CREATIVE) && prospect.bundleId != 0 && prospect.bundleId != null" style="text-align: right;">
                        <a [href]="'bundles/' + prospect.bundleId + '/assets'">Creative</a>
                    </td>
                </tr>

I want to highlight the entire row in red where prospect.processedProspects is greater than 100 and the amount of sent emails for that prospect is less than 50%. I'm not sure if I can complete this using interpolation and class binding alone.

export class DeploymentSummaryScreen implements OnInit {

    loading: boolean;

    deployment: Deployment[];
    startDate: Date;
    endDate: Date;

Not sure if more of the .ts file is needed.

Upvotes: 1

Views: 2138

Answers (3)

JW Zhu
JW Zhu

Reputation: 31

You can use [ngClass] to achieve that. Following is my code, which is tested and working fine. Following sample use Material Icon as an example. So you must include following line in the app.module.ts.

import { MatIconModule } from '@angular/material/icon';

Include following line in the index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

In your html file:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

<!-- description Column -->
<ng-container matColumnDef="description">
  <th mat-header-cell *matHeaderCellDef> Description </th>
  <td mat-cell *matCellDef="let element"
  [ngClass]="{'specialHighlight': readIcon == 'mail'}"> {{element.description}} </td>
</ng-container>

<!-- trash Column -->
<ng-container matColumnDef="trash">
  <th mat-header-cell *matHeaderCellDef></th>
  
  <td mat-cell *matCellDef="let element">
    <span>
    <mat-icon aria-hidden="false" aria-label="Example home icon" (click)="changeRead()">{{ readIcon }}</mat-icon>
  </span>
  </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
    (click)="rowClicked(row)">
</tr>

In your ts file:

/* readIcon indicates if the row (mail) is read */
readIcon = 'drafts';

changeRead() {
  if (this.readIcon == 'drafts') this.readIcon = 'mail';
  else this.readIcon = 'drafts';

}

In your css file:

.specialHighlight {
  font-weight: bold;
}

Upvotes: 0

Pac0
Pac0

Reputation: 23149

You can use *ngClass to apply a class conditionaly.

<tr *ngFor="let prospect of deployment"
    *ngClass="{specialHighlight: prospect.processedProspects > 10 && yourConditionOnEmails}">

and of course the specialHighlight class is to be defined somehow in your css.

Upvotes: 1

nircraft
nircraft

Reputation: 8478

You can use [ngClass] for doing this and assign a class to table row. The NgClass directive allows you to set the CSS class dynamically for a DOM element. You need to write css for your css-class that serves your purpose:

<tr [ngClass]="{'font-red': prospect.processedProspects > 10" *ngFor="let prospect of deployment">
                    <td>{{prospect.campaignName}} | {{prospect.campaignId}}</td>
                    <td>{{prospect.dealerName}} | {{prospect.dealerId}}</td>                
                    <td class="group-added">{{prospect.addedDate | date : 'shortDate' }}</td>
                    <td class="group-added" style="text-align: right;">{{prospect.addedProspects | number}}</td>
                    <td class="group-processed">{{prospect.startedDate | date : 'shortDate' }}</td>
                    <td class="group-processed">{{prospect.stage}}</td>                
                    <td class="group-processed" style="text-align: right;">{{prospect.processedProspects | number}}</td>
                    <td class="group-processed" style="text-align: right;">{{prospect.emailsSent | number}}</td>
                    <td class="group-processed" style="text-align: right;">{{prospect.emailsError | number}}</td>
                    <td *ngIf="perms.has(perms.CREATIVE) && prospect.bundleId != 0 && prospect.bundleId != null" style="text-align: right;">
                        <a [href]="'bundles/' + prospect.bundleId + '/assets'">Creative</a>
                    </td>
                </tr>

in css:

     .font-red { color: red; }

You can also use NgStyle directive which lets you set a given DOM elements style properties. Ex: 

  <tr [ngStyle]="{'background-color': prospect.processedProspects > 10 ? 'green' : 'red' }">
    ......
</<tr>

Upvotes: 4

Related Questions