Angular row-col (help)

 Angular Row-Col (help)

------------------------------------------

There is this life long confusion of row-col in angular how to use it effectively for making responsive contents.

Simple example is there,

<div class="row">

  <div *ngFor="let card of cards" [ngClass]="'col-sm-6 col-md-4 col-lg-3'">

    <app-card [label]="card.label"  total="2" percentage="10" class="p-3"></app-card>

  </div>

</div>

Here we use ngFor inside a row and then define col along side with ngFor. Why? Because, here ngFor can be a single or multiple element/s depending upon the object items.

We can use any elements inside the ngFor instead of <app-card> like <p>, <h1> etc.