Angular 'ngx-datatable-cell-template' doesn't work when inside ngIf

232 views Asked by At

I'm using ngx-datatable with dynamic columns and I'm using this code and it works fine:

<ng-container *ngFor="let c of columnsConfig | keyvalue: originalOrder">
    <ngx-datatable-column *ngIf="c.value.show" #colToFetch name="c.value.label" [resizeable]="true">
        <!-- column -->
        <ng-template let-column="column" ngx-datatable-header-template let-sort="onSort">
            <span class="datatable-header-cell-label draggable interactive">
                {{c.value.label}} <em class="interactive" [ngClass]="c.value.sort | getSortArrowClass"></em>
            </span>
        </ng-template>
        <!-- cell -->
        <ng-template let-row="row" ngx-datatable-cell-template>
            <span title="someTitle" class="titleText">{{c.value.content}}</span>
        </ng-template>
    </ngx-datatable-column>
</ng-container>

But I would like to include if condition in the "cell" section to behave differently for one specific column. I tried this:

<ng-container *ngFor="let c of columnsConfig | keyvalue: originalOrder">
    <ngx-datatable-column *ngIf="c.value.show" #colToFetch name="c.value.label" [resizeable]="true">
        <!-- column -->
        <ng-template let-column="column" ngx-datatable-header-template let-sort="onSort">
            <span class="datatable-header-cell-label draggable interactive">
                {{c.value.label}} <em class="interactive" [ngClass]="c.value.sort | getSortArrowClass"></em>
            </span>
        </ng-template>
        <!-- cell -->
        <ng-container *ngIf="c.key != 'specialColumn'">
            <ng-template let-row="row" ngx-datatable-cell-template>
                <span title="someTitle" class="titleText">{{c.value.content}}</span>
            </ng-template>
        </ng-container>
        <ng-container *ngIf="c.key == 'specialColumn'">
            <ng-template let-row="row" ngx-datatable-cell-template>
                <span title="someTitle" class="titleText">Special column: {{c.value.content}}</span>
            </ng-template>
        </ng-container>
    </ngx-datatable-column>
</ng-container>

but it just doesn't work. Once I wrap ng-template ngx-datatable-cell-template with ng-container and ngIf, the span inside the ng-template will never render, it's just skipped. All cells are empty. It doesn't matter what condition the ngIf has. I tried ngIf=true and it didn't work. If I remove ngIf and keep empty ng-container, it suddenly works.

When I used debugger, I was able to get inside the ngIf block on th eline with ng-template, so obviously, the condition is not the issue, but the program never got to span. It just went from ng-template directly to next iteration.

Any ideas why does it behave like this?

0

There are 0 answers