How to set background color to an entire cell with some element in a condition using PrimeNG

Question

I'm trying to set a background in my entire cell (or my entire row) according to my condition, but the background it placed only at my HTML element.

I already tried put some class at my trying to set the padding 0, I already tried put some div.

HTML

<p-column header="Motivo"  [style]="{width: '100px', 'text-align': 'center'}">
  <ng-template let-movimento="rowData" pTemplate="body">
   <p [ngClass]="{'motivo-SemEfeito': movimento.motivoDesligamentoId == 2}">
       {{ movimento.motivoDesligamento }}
    </p>
  </ng-template>
</p-column>

CSS

.motivo-SemEfeito {
  text-decoration: line-through;
  background: red;
 }

Answer 1

You can try this way by using styleClass

HTML

<p-column header="Motivo"  [styleClass]="methodNameForTheClass(data)">

TS

 methodNameForTheClass(data){
   // write your condion here and return class name as string
   return 'className';
}

Answer 2

As shown in the document of NgClass you can put a condition to your class:

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

Put the background in your css class for it:

html:

<div [ngClass]="{'red': red, 'blue': !red}">
    <p-column header="Motivo"  [style]="{width: '100px', 'text-align': 'center'}">
      <ng-template let-movimento="rowData" pTemplate="body">
       <p [ngClass]="{'motivo-SemEfeito': movimento.motivoDesligamentoId == 2}">
           {{ movimento.motivoDesligamento }}
        </p>
      </ng-template>
    </p-column>
</div>

css:

.red {
    background: red;
}

ts:

const red = false;