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

Chintan Bhuta

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.

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Angular 4 ngFor & ngIf

Using ngIf and ngFor in option

How to combine ngIf with ngFor

Angular How to use *ngIf and *ngFor on same Html element

How to use variables used in *ngFor/*ngIf to fill the html element properties

Angular 4 *ngFor adding a row div every third column

Using NgFor in an NgIf and NgIfElse block

Hide element using ngFor and ngIf

How to use ngIf inside of ngFor

How to keep adding text box on every click using ngIf

How to display the information of a subobject using ngfor

How to display json object using *ngFor

How to not display in dom when using condition with ngFor

How to display grouped data using flexbox and *ngFor

How to display multi dimensional array using ngFor?

Calculate values of multiple fields and display for every row in Javascript

How to replace values after every nth row

Angular4: How do I *ngFor, for every number in an int?

How to retrieve values of non selected row in HTML datatable using jquery

How to display a data table values in html table using angular js

How to use two ngFor in html Angular 4?

In Angular, using *ngFor inside *ngIf not working

Comma separated list using angular ngfor and ngif

Apply a condition using ngFor and ngIf in angular 2

Angular - Using *ngIf with *ngFor to specific rows in table

Using *ngFor with ng-container and *ngIf

How to display the values of every single bar in a barplot in R (without using ggplot)?

Angular Display ngFor in Row and Column

How to not display subcomponent if it's empty without using *ngIf in it's parent?