Make an Angular *Ngfor Draw Two Different Columns of Data

How to divide *ngFor list of values into two divs

html

<div *ngFor="let person of set1; let ind = index;">
    <div *ngIf="ind % 2 == 0">
        {{set1[ind]}} - {{set1[ind+1]}}
    </div>
</div>

ts

export class AppComponent {
    set1 = [1,2,3,4,5,6];
}

Display data from ngFor loop in two columns in Angular

Use the slice pipe With the SlicePipe https://angular.io/api/common/SlicePipe

<div class="col-md-6">
  <div *ngFor="let dia of selectedCenter.dias | slice:0:5>
    ...
  </div>
</div>
<div class="col-md-6">
  <div *ngFor="let dia of selectedCenter.dias | slice:5:9>
    ...
  </div>
</div>

*ngFor take two values at once?

Flexbox approach to achieve 2 column layout of a linear list

<div class="parent">
  <div class="child" *ngFor="let point of points" >
    <label for=... ></label>
    <input ...></input>
  </div>
</div>

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 50%;
}

ngFor create 2 rows

That exists with slightly different syntax:

<template ngFor let-element [ngForOf]="data" let-i="index">
   <tr>...</tr> //row 1
   <tr>...</tr> //row 2
</template>

or

<ng-container *ngFor="let element of data let i=index">
   <tr>...</tr> //row 1
   <tr>...</tr> //row 2
</ng-container>

update for >= 4.0.0 <template> was changed to <ng-template>

<ng-template ngFor let-element [ngForOf]="data" let-i="index">
   <tr>...</tr> //row 1
   <tr>...</tr> //row 2
</ng-template>

How do I reference two active ngFor s at the same time?

If you are trying to reference a property name with variable, you should parenthesize with [].

This would work:

<table>
    <tr>
        <th>Name</th>
        <th *ngFor="let property of addedColumns">{{property}}</th>
    </tr>
    <tr *ngFor="let obj of objectList">
        <td>{{obj.name}}</td>
        <td *ngFor="let property of addedColumns">{{obj.properties[property]}}</td>
    </tr>
</table>

---

Related Topics