I am wanting to create a grid of the following array:
[
[ 'a', 'b', 'c' ],
[ 'd', 'e', 'f' ],
[ 'g', 'h', 'i' ]
]
such that I have a grid displaying them like:
| a | b | c |
| d | e | f |
| g | h | i |
But I can't seem to get things to work.
Here is a stackblitz with what I have so far
The HTML:
<div class="container">
<div class="row" *ngFor="let row of data">
<div class="item" *ngFor="let item of row">{{item}}</div>
</div>
</div>
Try to use table like this
<table>
<tr *ngFor="let row of data">
<td *ngFor="let item of row">
<div class="item" >{{item}}</div>
</td>
</tr>
</table>
To achieve expected result, use below option of using index
1. First loop by data and use let i = index
2. In second loop also use data instead of row and use item[i]
<div class="container">
<div class="row" *ngFor="let row of data; let i = index">
<div class="item" *ngFor="let item of data">{{item[i]}}</div>
</div>
</div>
Working code - https://stackblitz.com/edit/grid-test-new-znetmq?file=src/app/app.component.html
With current code you are rendering rows as children of "grid" element. The result is
|row1|row2|row3|
|row1|row2|row3|
|row1|row2|row3|
that is why a,b and c are rendered in first column. css grid is especially good at implementing 2d layouts, i.e. no rows are actually needed. to implement the desired result you could for example add
.row {
display: contents;
}
it will make css logic to apply ".item" elements as they were direct child of ".container". Another Angular option is to render rows inside of ng-content element like this:
<ng-content *ngFor="let row of data">
....
ng-content element is a helper angular element and is not rendered in resulting markup. Or you could simply use flex or float like grids
flex beforehand, which does work reasonably well, but I just couldn't get the character boxes to be the same widths for some reason. Could you possibly create an example?
display: flex to container and flex: 1 1 100px; for children. they should have the same width in such case. third value could be anything. just the same for all children to apply the same proportion