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?