How to Implement *matCellDef and *ngif on the Same Cell

Solution 1:

  1. You can't use two structural directives on one element, so YES! you should put *ngIf on another element.

  2. 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>