CODEWITHSUNDEEP
javascriptangulartypescriptngfor
NewKey
NewKey

Reputation: 85

Angular 2 ngFor row and columns created one big Col

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

Upvotes: 7

Views: 9113

Answers (2)

Aravind
Aravind

Reputation: 41543

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 enter image description here Updated Plunk

Upvotes: 9

Sudheer KB
Sudheer KB

Reputation: 1606

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>

Upvotes: 1

Related Questions