Primeng: [Usage] DataTable - ngIf within ng-template for generating template

[hintdesk]

Hi all,

I would like to make a dynamic DataTable whose template is generated by the column definitions I'll give by code.

<p-dataTable
    [value]="items" 
    [editable]="true"
>
    <p-column selectionMode="multiple"></p-column>
    <p-column *ngFor="let column of columns"
        [header]="column.title"
        [field]="column.name"
        [editable]="true"
        >
        <ng-template let-item="rowData" pTemplate="body"
            [ngIf]="item && column.inputElement.type === InputElementTypeEnum.integer">
            <p-spinner [(ngModel)]="item[column.name]"></p-spinner>                     
            {{column.inputElement.type === InputElementTypeEnum.integer}}                       
        </ng-template>
    </p-column>
</p-dataTable>

With the template above I expected that when column has type of integer, I'll display a spinner. If not, then use the standard. But it doesn't work as expected, it will generate spinner for both of columns although the first column doesn't have type of integer (as you can see the condition gives false back)

I've tried many hours with different syntaxes of ng-template and ngIf but I can't make it work correctly.
Would you please tell me what I'm doing wrong here?
Thank you.

PS: I just used pTemplate="body" to show the condition value for both of columns for the screenshot.

[rmccleave559]

Hi @hintdesk I can do this by wrapping the ng template in an ng container.

Look at my code, is this what you are trying to do?
`
resizableColumns="true" columnResizeMode="expand" reorderableColumns="true">

        <p-column  *ngFor="let column of columns" [field]="column.ColumnName" [header]="column.Header" [hidden]="!canShow(column)" 
            [editable]="canEdit(column)"  filter="true" filterMatchMode="contains" sortable="true">

            <!-- Standard Cell Template -->
            <ng-container *ngIf="column.Element != ElementEnum.DatePicker">
                <ng-template let-col let-row="rowData" pTemplate="body">
                    <span>{{row[col.field]}}</span>                   
                </ng-template>
            </ng-container>

            <!-- DatePicker Template-->
            <ng-container *ngIf="column.Element === ElementEnum.DatePicker">
                <ng-template let-col let-row="rowData" pTemplate="body">
                    <span>{{row[col.field] | date: 'dd/MM/yyyy'}}</span>                   
                </ng-template>
            </ng-container>

            <!-- Cell Editor Templates -->

            <!-- Text Input -->
            <ng-container *ngIf="column.Element === ElementEnum.TextInput" >
                <ng-template let-col let-row="rowData" pTemplate="editor">
                    <input type="text" pInputText [(ngModel)]="row[col.field]"/>
                </ng-template>
            </ng-container>

            <!-- Datepicker -->
            <ng-container *ngIf="column.Element === ElementEnum.DatePicker" >
                <ng-template let-col let-row="rowData" pTemplate="editor">                        
                    <p-calendar [(ngModel)]="row[col.field]" dateFormat="dd/mm/yy"></p-calendar>
                </ng-template>
            </ng-container>

            <!-- Combobox -->
            <ng-container *ngIf="column.Element === ElementEnum.ComboBox" >
                <ng-template let-col let-row="rowData" pTemplate="editor">                        
                    <p-dropdown [(ngModel)]="row[col.field]" [options]="column.Options" placeholder="Please select an option" 
                    [autoWidth]="false" [style]="{'width':'100%'}" appendTo="body"></p-dropdown>
                </ng-template>
            </ng-container>

        </p-column>
    </p-dataTable>

`

[cagataycivici]

p-dataTable is deprecated and will be removed in favor of the new p-table (aka TurboTable) of 5.1.0 so closing the issue. Please try the new p-table once 5.1.0 is released.