ngIf ngElse for dynamic data form web api in angular-CodePudding

I have dynamic data from API, here's the html:

<table mat-table [dataSource]="dataSource" matSort matTableResponsive>
  
      <!-- ID Column -->
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
        <td mat-cell *matCellDef="let row  let i = index;"> {{i 1}}  </td>
      </ng-container>
  
    
  
      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
        <td mat-cell *matCellDef="let row"> {{row.name}} </td>
      </ng-container>
      
       <!-- PaymentType Column -->
       <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> PaymentType </th>
        <td mat-cell *matCellDef="let row"> {{row.type}} </td>
      </ng-container>
      
    </table>

From this html page I have 2 rows which are from the web-API and this last column {{row.type}} value can be 0 or 1.

How do I declare the if else statement?

My condition is:

  if(row.type==1)
     {
      online
     }
    else
     {
      offline
     }

How do I implement my requirement from the above in the angular material table?

CodePudding user response：

Well, you can just simply use *ngIf directive:

<ng-container matColumnDef="type">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> PaymentType </th>
    <td mat-cell *matCellDef="let row">
        <!-- There is nothing to stop you from adding more HTML here :) -->
        <span *ngIf="row.type === 1; else oflineType">Online</span>
    </td>
</ng-container>

<!-- This template can be anythwhere in your .html file -->
<ng-template #oflineType>
    offline
</ng-template>

You might also want to use ternary operator syntax like this:

<ng-container matColumnDef="type">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> PaymentType </th>
    <td mat-cell *matCellDef="let row">
        {{ row.type === 1 ? 'Online' : 'Offline' }}
    </td>
</ng-container>

There are also more sophisticated ways to achieve that with pipes, maps etc. However i think this should be enough for your needs.

// Edit

If you want to use multiple conditions i would suggest function approach

// Your template .html
<ng-container matColumnDef="type">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> PaymentType </th>
    <td mat-cell *matCellDef="let row">
        {{ typeToString(row.type) }}
    </td>
</ng-container>

// Your controller .component.ts
typeToString(_type: number) {
    let stringType: string = 'default';
    // You can use if/switch there
    switch(_type) {
        case 1:
            stringType = 'online';
            break;
        case 2:
            stringType = 'offline';
            break;
        case 3:
            stringType = 'hidden';
            break;
        case 4:
            stringType = 'do not disturb';
            break;
    }

    return stringType;
}