Represent boolean values in the form of 2 different icons (one for true, one for false) in PrimeNG DataTable

Question

I want to represent boolean values in the form of icons for a column field in data table primeng. Following is a piece of code:

<p-dataTable [value]="ARRAY_METADATA" rowHover="true"> <p-column field="id" header="Field ID" [sortable]="true"></p-column> <p-column field="booleanField" header="Boolean Field" [sortable]="true"></p-column> </datatable>

How am I supposed to show maybe a "Tick" for true values and "cross" for false values for the booleanField?

<span class="badge">BOOLEAN VAUE</span>

I guess the above code works well in case of pure HTML. But again how am I suppose to put the conditional statement to output two different icons for different boolean values? Any quick thoughts??

I tried using ngIf but it still does not display the way I need. It simply displays the content of ng-template:

<p-column field="someStringField" header="Some String Field"> <div *ngIf="someStringField; else elseBlock"> <button type="button" pButton icon="fa-check"></button> </div> <ng-template #elseBlock pTemplate="body" > <button type="button" pButton icon="fa-times"></button> </ng-template> </p-column>

see suggested answer below

BillF
– BillF

2017-07-22 05:35:45 +00:00
Commented Jul 22, 2017 at 5:35 — BillF
– BillF, Commented Jul 22, 2017 at 5:35

BillF · Accepted Answer · 2017-07-22 05:37:30Z

I believe you have to put any content you want to be visible in the column to be in the ng-template

<ng-template let-col="rowData" pTemplate="body"> <button *ngIf="col.someValue" type="button" pButton icon="fa-check"></button> <button *ngIf="!col.someValue" type="button" pButton icon="fa-times"></button> </ng-template>

Collectives™ on Stack Overflow

Represent boolean values in the form of 2 different icons (one for true, one for false) in PrimeNG DataTable

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related