PrimeNG: assigning the styleClass to p-column based on some condition

Question

I want to assign a styleClass to the p-header element of the p-dataTable based on a condition (only first five columns need a specific style).

How can I achieve that? I tried the following -

<p-column 
    *ngFor = "let columnName of columns; let i = index;" 
    field="name" 
    styleClass="{{getStyleClass(i-1)}}">

and the getStyleClass() function in the ts file, but that doesn't seems to work.

Answer 1

You can use templating for that :

<p-column *ngFor="let col of cols; let i=index" [field]="col.field" [header]="col.header" [ngClass]="{'aze': true}">
  <template let-col let-data="rowData" pTemplate="body">
    <span [ngClass]="getStyleClass(i)">{{ data[col.field] }} {{col.id}}</span>
  </template>
</p-column>

TS

getStyleClass(id) {
 if(id<2) {
  return 'customClass'+id;
 }
 return '';

}

CSS

.customClass0 {
  color: blue;
}

.customClass1 {
  color: green;
}

See Plunker