How to display two table columns per row in Angular 2 loop (Angular2 equivalent of PHP's array_chunk)

Question

How can I achieve the following with Angular 2?

I would like to display data, two columns per row during my foreach. I would like my result to look like the following:

<table>
<tr><td>VALUE1</td><td>VALUE2</td></tr>
<tr><td>VALUE3</td><td>VALUE4</td></tr>
<tr><td>VALUE5</td><td>VALUE6</td></tr>
</table>

Similar question: How to display two table columns per row in php loop

Plunker with basic idea: https://plnkr.co/edit/LuEYfK?p=preview

Answer 1

You can use *ngFor for loop:

let data = [{value:'VALUE1'}, {value:'VALUE2'}, {id: 3, value:'VALUE3'},{value:'VALUE4'}];

<table>
 <div *ngFor="let item of data | let isEven = even;let i = index;let isLast= last">
 <tr *ngIf="isEven & !isLast">
   <td>item1 value: {{data[i].value}}</td>
   <td>item2 value: {{data[i + 1].value}}</td>   
   </tr>
 </div>
</table>

i am not sure if this is what you mean hope its helping you.

Good Luck

Answer 2

Base on @YairTawil answer, I create a pipe to display 3 item per page like below.

This way I implement in my project, I share for whom concern.

Pipe:

@Pipe({
  name: 'pairs'
})
export class PairsPipe implements PipeTransform {
  transform(array) {
    return array.reduce((result, item, index) => (
      index % 3 ? result : [...result, [item, array[index + 1], array[index + 2]]]
    ), []);
  }
}

TS code

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  data = {
    DepartmentFees: [
      { Name: "컴포넌트", Value: 1480.0 },
      { Name: "기판", Value: 1758.0 },
      { Name: "모듈", Value: 1617.0 },
      { Name: "렌즈", Value: 1447.0 },
      { Name: "테스트", Value: 1345.0 },
      { Name: "광케이블", Value: 1365.0 }
    ]
  };
}

HTML

<div *ngFor="let item of data.DepartmentFees | pairs">
    <div class="d-flex mt-1">
        <div class="flex-fill pl-3 pr-3">
            <div class="text-left divider_card_title">{{item[0].Name}}</div>
            <div class="text-right value_unit mt-1">억원</div>
            <h3 class="text-right mt-2">{{item[0].Value}}</h3>
        </div>
        <div class="flex-fill pl-3 pr-3">
            <div class="text-left divider_card_title">{{item[1].Name}}</div>
            <div class="text-right value_unit mt-1">억원</div>
            <h3 class="text-right mt-2">{{item[1].Value}}</h3>
        </div>
        <div class="flex-fill pl-3 pr-3">
            <div class="text-left divider_card_title">{{item[2].Name}}</div>
            <div class="text-right value_unit mt-1">억원</div>
            <h3 class="text-right mt-2">{{item[2].Value}}</h3>
        </div>

    </div>

    <div class="dropdown-divider mt-2"></div>
</div>

Demo https://stackblitz.com/edit/angular-display-3item-row