Angular 2 ngFor row and columns created one big Col

Question

Apparently ngfor generates divisions of the divs one by one, and when it finishes placing all the divs one down the other, presenting a bad design, I want to get something like this:

[1] [2] [3]
[4] [5] [6]

And only as a result I have:

[ 1 ]
[ 2 ]
[ 3 ]
  and continues..

My JSON is something like this:

[
  {
    "id_nivel": "1",
    "nombre": "A",
    "constelacion": "AA",
    "descripcion": "AAAAAAAAAAAAAAAAAAAAA"
  },
  {
    "id_nivel": "2",
    "nombre": "B",
    "constelacion": "BB",
    "descripcion": "BBBBBBBBBBBBBBBBBBBBB"
  },
  {
    "id_nivel": "3",
    "nombre": "C",
    "constelacion": "CC",
    "descripcion": "CCCCCCCCCCCCCCCCCCCCC"
  },
  {
    "id_nivel": "4",
    "nombre": "D",
    "constelacion": "DD",
    "descripcion": "DDDDDDDDDDDDDDDDDDDDD"
  },
  {
    "id_nivel": "5",
    "nombre": "E",
    "constelacion": "EE",
    "descripcion": "EEEEEEEEEEEEEEEEEEEEE"
  },
  {
    "id_nivel": "6",
    "nombre": "F",
    "constelacion": "FF",
    "descripcion": "FFFFFFFFFFFFFFFFFFFF"
  }
]

The main problem:

<div class="app flex-row align-items-center">   
<div class="container">
        <div *ngFor="let data of Const" class="row"> 
            <div class="card-deck">
                <div class="card col-md-4">
                    <div class="card-block">
                        <h4 class="card-title">Level {{data.id_nivel}} - {{data.nombre}} </h4>
                        <p class="card-text"> {{data.descripcion}}</p>
                    </div>
                </div>
        </div>
    </div>
</div>

More info in this Plunker:

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

This could be useful http://stackoverflow.com/questions/21644493/how-to-split-the-ng-repeat-data-with-three-columns-using-bootstrap — Vinod Louis, Feb 03 '17 at 05:02

score 9 · Accepted Answer · answered Feb 03 '17 at 05:14

9

Replace with the below HTML

<div class="app flex-row align-items-center">   
    <div class="container"> 
        <div class="card-deck row">
            <div class="card col-md-6" *ngFor="let data of Const">
                <div class="card-block">
                    <h4 class="card-title">Level {{data.id_nivel}} - {{data.nombre}} </h4>
                    <p class="card-text"> {{data.descripcion}}</p>
                </div>
            </div>
        </div>
    </div>
</div>

Screen shot Updated Plunk

answered Feb 03 '17 at 05:14

Aravind

40,391
16
91
110

@NewKey was my answer helpful? – Aravind Feb 03 '17 at 16:21
It help me, but occurs a little problem http://puu.sh/tOzbF.png and is exactly as you posted, I tried with css block it with column-count and others but nothing happen – NewKey Feb 04 '17 at 23:17

score 1 · Answer 2 · answered Feb 03 '17 at 05:05

Change the html as below and it works now

<div class="app flex-row align-items-center">   
    <div class="container"> 
        <div class="card-deck row">
            <div class="card col-md-4" *ngFor="let data of Const">
                <div class="card-block">
                    <h4 class="card-title">Level {{data.id_nivel}} - {{data.nombre}} </h4>
                    <p class="card-text"> {{data.descripcion}}</p>
                </div>
            </div>
        </div>
    </div>
</div>

Angular 2 ngFor row and columns created one big Col

2 Answers2