The following scenario would be pretty easy in javascript but I got some problems getting it worked in Angular.
I got an Array like:
array a = ( "id" = 0, name = random(), column = 1, 2 or 3, blockrow= 1, 2 or 3)
With ngFor I try to create now a grid there all elements out of a get separated in colums and blocks in this column. So my current code (works but nasty).
<div *ngFor="let a of a">
<template [ngIf]="a.column=='1'">
<div *ngFor="let b of a">
<template [ngIf]="b.blockrow=='1'">
Block 1 in column 1{{b.name}}
</template>
</div>
<div *ngFor="let b of a">
<template [ngIf]="b.blockrow=='2'">
Block 2 in column 1{{b.name}}
</template>
</div>
<div *ngFor="let b of a">
<template [ngIf]="b.blockrow=='3'">
Block 3 in column 1{{b.name}}
</template>
</div>
</template>
</div>Something like this do I run for every column. Which means I loop trough the same array for 12 times. Is there any way to do it more beautifull ?
In your component, use JavaScript to build an array of arrays with the elements of a at the right coordinates, then use *ngFor inside *ngFor:
<div *ngFor="let row of rows">
<div *ngFor="let col of row">
Block {{col.blockrow}} in column {{col.column}} {{col.name}}
</div>
</div>
A third *ngFor might be needed if several blocks have the same coordinates.
You are using wrong syntax should be *ngIf instead of [ngIf]
<div *ngFor="let a of a">
<template *ngIf="a.column=='1'">
<div *ngFor="let b of a">
<template *ngIf="b.blockrow=='1'">
Block 1 in column 1{{b.name}}
</template>
</div>
<div *ngFor="let b of a">
<template *ngIf="b.blockrow=='2'">
Block 2 in column 1{{b.name}}
</template>
</div>
<div *ngFor="let b of a">
<template *ngIf="b.blockrow=='3'">
Block 3 in column 1{{b.name}}
</template>
</div>
</template>
</div>