CODEWITHSUNDEEP
javascriptcssangulartypescript
physicsboy
physicsboy

Reputation: 6326

Creating a custom grid from an array of arrays with angular and css

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>

Upvotes: 0

Views: 2250

Answers (3)

Andrei
Andrei

Reputation: 12036

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

Upvotes: 0

Naga Sai A
Naga Sai A

Reputation: 10975

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

Upvotes: 1

wessam yaacob
wessam yaacob

Reputation: 937

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>

Upvotes: 1

Related Questions