javascript - 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

https://plnkr.co/edit/umL80bh0WKr8aPEueCxZ?p=preview

You can create pipe to get pairs values:

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

add pipe to Module:

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App , PairsPipe],
  bootstrap: [ App ]
})

and use in *ngFor:

 <tr *ngFor="let item of data | pairs">