Search code examples
htmlcsshtml-tablengforangular-ng-if

How to display 4 values in every row in html using ngfor and ngif?


I want to display key value pair via for loop in table, tr tag. 3-4 pairs I want to display in one row.

Added my code here- https://stackblitz.com/edit/angular-ivy-hrqira?file=src/app/app.component.ts

I want to display 4 values each in the row. Updated my question with this link.

<table>
<div *ngFor="let table of uiFields | keyvalue">
<tr><td><label>{{table.key}}</label><label>{{table.value}}</table></td>
</tr>
</div>
</table>

I am getting values one below the other, I want to display 3-4 pairs in one line. uiFields is my map containing different values.


Solution

  •     <table>
        <tr><td *ngFor="let table of uiFields | keyvalue"><label>{{table.key}}</label><label>{{table.value}}</table></td>
        </tr>
        </table>