How to Implement matCellDef and ngif on the Same Cell

January 17, 2022

I originally created a static HTML table where I set a formula and css based on the value in the cell:

<td *ngIf="r.Num_Of_Days !== 0 "(click)="getCTData(r.Name,'Num_Of_Days','high')" class="rd">
    {{r.Num_Of_Days}}
</td>
<td *ngIf="r.Num_Of_Days === 0 "></td>

I had to change to using Angular Material since the column names will be dynamic and I had to use the columnstodisplay directive to identify which columns to show. I tried using *matCellDef and *ngIf in the but it threw an error. I did some searching and saw that I needed to use <ng-container, so I came up with the following:

<td mat-cell *matCellDef="let r">
    <ng-container *ngIf="r.Num_Of_Days !== 0;else conditionNotMet" 
       (click)="getCTData(r.Name,'Num_Of_Days','high')" class="rd">
        {{r.Num_Of_Days}}
    </ng-container>
</td>
<ng-template #conditionNotMet></ng-template>

This populates the data ok, BUT it doesn’t apply the function or the css to the cell. How can I get the css and function applied correctly so that when the value is 0 there is no click event and the cell is not colored AND if the value is greater than 0 than the function and formatting are applied?

>Solution :

You can’t use two structural directives on one element, so YES! you should put *ngIf on another element.
Your styles and event listener function did’t work because you have used ng-container which is not beeing created in the final result.

SOLUTION. Just put the logic into a div element

<td mat-cell *matCellDef="let r">
    <ng-container *ngIf="r.Num_Of_Days !== 0;else conditionNotMet">
        <div (click)="getCTData(r.Name,'Num_Of_Days','high')" class="rd">
          {{r.Num_Of_Days}}
        </div>
    </ng-container>
</td>

OR use *ngIf on a div

<td mat-cell *matCellDef="let r">
       <div *ngIf="r.Num_Of_Days !== 0;else conditionNotMet"                    (click)="getCTData(r.Name,'Num_Of_Days','high')" class="rd">
          {{r.Num_Of_Days}}
        </div>
</td>