Error when using ngIf inside angular material table

Question

need some help with an issue in angular material table. I pass simple data to the table with [datasource], but I would like to evaluate the values of the datasource and display values in the table depending those values. for example see column causa which could be values (1,2,3 or 4) and for example if it is equal to 1 display "Fraud" in the table.

<h3>Lista casos</h3>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <ng-container matColumnDef="idcaso">
      <th mat-header-cell *matHeaderCellDef style="text-align: center;"> ID Caso </th>
      <td mat-cell *matCellDef="let caso"> {{caso.idCaso}} </td>
    </ng-container>  

    <ng-container matColumnDef="estado">
      <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Estado </th>
      <td mat-cell *matCellDef="let caso"> {{caso.estado}} </td>
    </ng-container>  

    <ng-container matColumnDef="causa">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Causa </th>
        <td mat-cell *matCellDef="let caso" *ngIf="caso.causa === 1"> fraud </td>
        <td mat-cell *matCellDef="let caso" *ngIf="caso.causa === 2"> Injustified </td>
        <td mat-cell *matCellDef="let caso" *ngIf="caso.causa === 3"> stolen </td>
        <td mat-cell *matCellDef="let caso" *ngIf="caso.causa === 4"> other </td>

    </ng-container> 

    <ng-container matColumnDef="detalles">
      <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Detalles </th>
      <td mat-cell *matCellDef="let caso"> 
        <a routerLink="/dashboard/gestion/{{caso.idCaso}}"><button mat-button>Ver caso</button></a>
      </td>
    </ng-container> 


    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> 
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

I am receiving the next error ->

error NG5002: Can't have multiple template bindings on one element. Use only one attribute prefixed with *

Answer 1

as noted in the other answer, multiple structural directives (things with * syntax) aren't allowed on a single element, so you need to split them up, personally, i'd do it like this, with the ngSwitch directive:

<td mat-cell *matCellDef="let caso" [ngSwitch]="caso.causa"> 
  <ng-container *ngSwitchCase="1"> fraud </ng-container>
  <ng-container *ngSwitchCase="2"> Injustified </ng-container>
  <ng-container *ngSwitchCase="3"> stolen </ng-container>
  <ng-container *ngSwitchCase="4"> other </ng-container>
</td>

Answer 2

put it that way

<td mat-cell *matCellDef="let caso" > 
<ng-container *ngIf="caso.causa === 1">
fraud
</ng-container>
<ng-container *ngIf="caso.causa === 2">
Injustified
</ng-container>
<ng-container *ngIf="caso.causa === 3">
 stolen
</ng-container>
<ng-container *ngIf="caso.causa === 4">
 other
</ng-container>
</td>

because we can use two * binding on each element.

Answer 3

As stated earlier, you are not able to use 2 structural directives in one element.

I would recommend to omit the usage of 5 *ngIfs. It clutters up the html, code and looks not clear at all. More over, it makes the template-cyclomatic-complexity too high, it's not recommended.

Might be better to use something like this in html

 <td mat-cell *matCellDef="let caso"> getCausaDescription(caso.causa) </td>

and in .ts file

getCausaDescription(causa: number): string {
 switch (causa) {
  case 1:
    return 'Fraud';
  case 2:
    return 'Injustified';

  .....
  default:
    return 'Default name';
 }
}