[SOLVED] ngFor and Ion-grid

Hi :slight_smile:

I have a problem with ngFor, because I want to create a new row when i%2 === 0 for have just two items by line.

But my ngFor is on ion-col, how I can create a new ion-row once I have 2 items on a line ?

   <ion-grid>
      <ion-row>
        <ion-col class='cardRestaurant' *ngFor="let restaurant of restaurants; let i = index">
          <ion-card (tap)='showDiner()'>
            <img [src]="'assets/images/'+ restaurant.imagee"  class="imgCardMain" />
            <ion-card-content>
              <ion-card-title>
                <span class="textCardRestaurant">{{ restaurant.title }}</span>
                <span class="sousTextCardRestaurant"><br>{{ restaurant.type }}</span>
                <span class="sousTextCardRestaurant">Prix = {{ restaurant.prix }}โ‚ฌ</span>
                <span class="textCardRestaurant"><br>{{ restaurant.avis }}</span><span class="note">/10</span>
                <img src="assets/images/trip.png" class="imgTrip">
                <span class="reduction"><br>{{ restaurant.reduction }}% sur la carte</span>
              </ion-card-title>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-list>
2 Likes

You donโ€™t have to. Just use the wrapping feature by putting the col-6 attribute on your <ion-col> and you should see what you expect. No need for let i = index at all.

4 Likes

That works, thanks again @rapropos