Looping angular object in bootstrap grid

Question

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

i just want to display cards in my angular app as that particular grid

3 cards in a row then in the next row

   <div class="container" *ngFor="let item of post">
      <div class="row">
        <div class="col-sm">
          <h2>{{item.title}}</h2>
    
        </div>
        
      </div>
    </div>

this is how it turned out

instead of column

it's just fetched those object data as rows is there any way where we could loop over that grid and display data accordingly

Note:I have tried Angular material Grid 

i have tried using Flexlayout still no luck with that

i just need a possible way where i can dispaly data like this

Answer 1

The problem that you are facing comes to the fact that you are creating the loop on the container div; which then creates 3 container per card instead of a single container.

   <div class="container" *ngFor="let item of post">
      <div class="row">
        <div class="col-sm">
          <h2>{{item.title}}</h2>
    
        </div>
        
      </div>
    </div>

In order to implement what you want (a container with N cards) you have to declare the loop on the card elements.

   <div class="container">
      <div class="row">
        <div class="col-sm" *ngFor="let item of post">
          <h2>{{item.title}}</h2
        </div>
      </div>
    </div>

That way you will have a container, then a row, and finally the list of components created from the iteration.

You can read a little here: Angular ngFor example and here ngForOf Directive