Search code examples
javascriptangular2-templateprimengprimeng-datatable

Primeng angular2 ng-template

It is a simple question, but I could not found the answer for it for 2h by now.

Here is my code

<p-column field="status" header="Status" [sortable]="true" [style]="{'width':'7%'}">
        <ng-template let-col="rowData" pTemplate type="body">
            <div [ngClass]="{
            'stopped': (col.status == 'PARADO'),
            'programmed': (col.status == 'PROGRAMADO'),
            'production': (col.status == 'PRODUZINDO'),
            'completed': (col.status == 'FINALIZADO')
            }">{{ col.status }}
            </div>
        </ng-template>
    </p-column>

As you can see I am using a class(stopped, programmed, ...) to color the div inside the p-column, but I actually need to color the p-column itself, not the div inside it.

Hope you guys can help me, thanks.

Solution

  • https://www.primefaces.org/primeng/#/datatable

    If you look under the "Attributes" section there is a style, styleClass, and rowStyleClass attribute you can apply. You could try using one of those? Hopefully that works.

    Or have you tried styling p-column directly in your CSS? Such as:

    p-column {background-color:red;}