CODEWITHSUNDEEP
htmlangulartypescriptangular-material
Ryan Coolwebs
Ryan Coolwebs

Reputation: 1631

Can I put an ngIf else condition on a Angular Material table?

I've followed the Angular docs here https://angular.io/api/common/NgIf to create an NgIf else conditional over my Material Table. It is reading remote JSON file as API.

The API is twitter data and one of the fields I want to run condition on is 'replies'. If there are no replies, I want to replace the "0" with a "-".

I am getting the error

Can't have multiple template bindings on one element. Use only one attribute prefixed with * (" Replies ]*ngIf="hashtags.replies<1; else noReplies"> {{hashtags.replies}} "):`

So it seems I cannot run NgIf and interpolate my data in the same element, I've tried all kinds of combinations in the HTML but I am real stuck.

HTML

<ng-container matColumnDef="replies">
  <th mat-header-cell *matHeaderCellDef> Replies </th>
  <td mat-cell *matCellDef="let hashtags" *ngIf="hashtags.replies<1; else noReplies"> {{hashtags.replies}} </td>
  <ng-template #noReplies>-</ng-template>
</ng-container>

Upvotes: 2

Views: 14542

Answers (3)

Shashank Vivek
Shashank Vivek

Reputation: 17494

Try

    <ng-container matColumnDef="replies">
      <th mat-header-cell *matHeaderCellDef> Replies </th>
      <ng-container *matCellDef="let hashtags">
        <td mat-cell *ngIf="(hashtags.replies>0); else noReplies"> {{hashtags.replies}} </td>
      </ng-container>
      <ng-template #noReplies>-</ng-template>
    </ng-container>

The reason for getting this error is because your can't put 2 structural directives on the same DOM

In your code, you were using *matCellDef and *ngIf on the same <td>.

Upvotes: 6

Robert C Zelaya
Robert C Zelaya

Reputation: 21

you can do it this way...... xd

<ng-container matColumnDef="estadoRevision">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Revision</mat-header-cell>
    <mat-cell *matCellDef="let element">
        <td *ngIf="element.a === 0"> ejemplo </td>
        <td *ngIf="element.a === 1"> ejemplo </td>
    </mat-cell>
</ng-container>

Upvotes: 2

Bill Turner
Bill Turner

Reputation: 1010

Is there any reason you can't do the conditional directly in the interpolation?

<td mat-cell *matCellDef="let hashtags">{{hashtags.replies > 0 ? hashtag.replies : '-'}}</td>

Upvotes: 0

Related Questions