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
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">
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
*ngFor and *ngIf together...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>