How to conditionally add rows to table in angular 5

Question

I am new to Angular 5. I have an array of objects in my app.component.ts. I want to use both *ngFor and *ngIf to create rows of a table and apply condition at the same time. Basically something like

<tr *ngFor="let row of rows" *ngIf="row['category']==='M'"><td>...</td><td>...</td></tr>

This is however not allowed and an error is displayd:

Can't have multiple template bindings on one element.

How to achieve this?

Answer 1

Use ng-container(documentaion link) for your ngFor.

<ng-container *ngFor= "let row of rows">
   <tr  *ngIf="row['category']==='M'"><td>...</td><td>...</td></tr>
</ng-container>