Apply CSS Rules conditionally to elements in *ngFor loop

user_8306594 0
Viewed 43

I have a list dynamically filled with objects.

I want to achieve to add a background color to the div containing the checked checkbox.

Moreover, i want to show the buttons when the checkbox is checked.

<div *ngFor="let item of items" [ngClass]="classname: ifCheckboxChecked">
  <p-checkbox (onChange)="onCheckboxChecked($event)"></p-checkbox>
  <span>{{item.itemName}}</span>
  <div *ngIf="ifCheckboxChecked">
    <button></button>
    <button></button>
  </div>
</div>
primeng angular typescript
1 Answers

The best possible way would be to add this "isChecked" property to your item's model. The code could then look something like this:

<div *ngFor="let item of items" [class.classname]="item.isChecked">
  <p-checkbox [(value)]="item.isChecked"></p-checkbox>
  <span>{{item.itemName}}</span>
  <div *ngIf="item.isChecked">
    <button></button>
    <button></button>
  </div>
</div>
user_86839850
Related