Change background color field on conditions

[ben1967]

Hi,

I use a datatable and if in a field with name "status" the value is "OK" the background of the field must be green and if it is "ERROR" background must be red. I do that with css and it works without problems with this code:

Code: Select all

 <p-column field="status" header="Status" [sortable]="true">
            <ng-template let-col let-data="rowData" pTemplate="body">
                    <span [ngClass]="(data[col.field] === 'OK') ? 'ok-background' : 'error-background' ">{{ data[col.field] }}</span>
                 </ng-template>
      </p-column>

Code: Select all

.error-background {
    background-color: red;
    color: white;
  }


  .ok-background {
    background-color: green;
    color: white;
  }
  

But how I have to solve this if I also have a value "WARNING" then the field also gets a red background color with the code I used above, but that field background color must be yellow.
How can I solve this if I want to have more then 2 values for background color ?

For example "WARNING" must have a yellow backgroundcolor.
Then the conditional if I have used doesn't work.
Thanks in advance
Ben

[sudheer]

The example is already available here https://www.primefaces.org/primeng/#/da ... templating and there you can find multiple CSS styles.

[ben1967]

Hi, ok great, yes I was thinking much to difficult, conditional if is not neccesary, I only had to change this:

Code: Select all

<p-column field="status" header="Status" [sortable]="true" [style]="{'width':'80px'}">
            <ng-template let-col let-data="rowData" pTemplate="body">
                    <span [ngClass]="data[col.field]">{{ data[col.field] }}</span>
             </ng-template>
 </p-column>

and accordingly CSS:

Code: Select all

.OK {
    background-color: green;
    color: white;
  }

  .ERROR {
    background-color: red;
    color: white;
  }

  .WARNING {
    background-color: yellow;
    color: white;
  }

Thanks again

[ben1967]

Hi Sudheer,

I just bought your book via your website, to help me to get up to speed with Angular and PrimeNG:

Angular UI Development with PrimeNG [eBook]

Thanks
kind regards
Ben