CODEWITHSUNDEEP
datatableiconsprimengangular-ng-if
user3509913
user3509913

Reputation: 67

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

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>

Upvotes: 1

Views: 2175

Answers (1)

BillF
BillF

Reputation: 864

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>

Upvotes: 1

Related Questions