Angular2 PrimeNG Conditional row Formatting

Question

I have an Angular2 app using PrimeNG components. I am attempting to make it so that when a field is of a certain value, the row in a DataTable is coloured a particular colour. I have another field which contains a colour value to use for the row highlight but cannot work out how to get it to work.

My Model is as follows (very simplified):

export class RepackRequest{
AdhereToLeadTime:   boolean;
LeadTimeRemaining: string;

constructor() {
    var today = new Date();
    if(this.AdhereToLeadTime){
        var difference = today.getTime() - this.StartDate.getTime(); 
        if(difference >= 3 && difference <= 4){
            this.LeadTimeRemaining = "orange";
        }
        else if(difference >= 5){
            this.LeadTimeRemaining = "red";
        }
    }
    else {
        this.LeadTimeRemaining = 'white';
    }
 }
}

So basically if it adhered to the lead time of 5 days, it changes colour depending on how close to the lead time it is.

In my template i then have the following:

<p-dataTable    [value]="approvalRepacks" 
                            [rows]="10" 
                            [paginator]="true" 
                            [pageLinks]="5" 
                            [rowsPerPageOptions]="[5,10,20]"
                            selectionMode="single"
                            [(selection)]="selectedRepack"
                            (onRowSelect)="onSelect()"
                            [globalFilter]="na">
                <header>
                    <div style="text-align:center;">
                        <button pButton type="button" icon="fa-plus" iconPos="left" label="Create New Request" (click)="addNew()"></button>
                    </div>
                </header>
                <p-column field="DateRequested" header="Date Requested" sortable="true">
                    <template let-col let-rep="rowData" pTemplate type="body">
                        <span [style.background]="{{rep.LeadTimeRemaining}}">{{rep[col.field] | date:'dd/MM/yyyy'}}</span>
                    </template>
                </p-column>
                <p-column field="OrderNum"          header="Order No"           sortable="true" styleClass="wordBreak"></p-column>
                <p-column field="Customer"          header="Customer"           sortable="true"></p-column>
                <p-column field="FromItem"          header="Repack From"        sortable="true" styleClass="wordBreak"></p-column>
                <p-column field="ToItem"            header="Repack To"          sortable="true" styleClass="wordBreak"></p-column>
                <p-column field="FromWarehouse"     header="From Whse"          sortable="true"></p-column>
                <p-column field="FromLocation"      header="From Bin"           sortable="true"></p-column>
                <p-column field="ToWarehouse"       header="To Whse"          sortable="true"></p-column>
                <p-column field="ToLocation"        header="To Bin"           sortable="true"></p-column>
                <p-column field="Quantity"          header="Qty"                sortable="true"></p-column>
                <p-column field="RequestedBy"       header="Requested By"       sortable="true" styleClass="wordBreak"></p-column>
                <p-column header="Actions">
                    <template let-col let-rep="rowData" pTemplate type="body">
                        <button pButton type="button" icon="fa-check" label="Approve" (click)="approve(rep.ID)"></button>
                    </template>
                </p-column>
            </p-dataTable>

As you can see i have [style.background]="{{rep.LeadTimeRemaining}}" to attempt to set the colour of the column.

I guess this is the wrong way to go about it as its setting it just for that column and id need the same on every column.

Can anyone help with this i cannot find any information anywhere regarding it.

Many Thanks

EDIT

Using the following on every column highlights it to a point however it is very unsightly as you can see below as it just colours the div rather than the td or tr.

<template let-col let-rep="rowData" pTemplate type="body">
    <div [style.background]="rep.LeadTimeRemaining" style="margin:-50px;">
         <span>{{rep[col.field]}}</span>
    </div>
</template>

Answer 1

You can highlight row in datatable using rowStyleClass attribute. You should pass function to this attribute. The function should return class name which will be applied on table row.

Template:

<p-dataTable [rowStyleClass]="highlightRow" ...>

Component code:

highlightRow(rowData: any, rowIndex: number) {
    return rowData.LeadTimeRemaining + '-highlighting';
}

CSS:

.red-highlighting { background-color: red; }
.white-highlighting { background-color: white; }
.orange-highlighting { background-color: orange; }