0

I have an image array of 20 images. I want to dynamically load my images in a virtual scroll grid form whereby every row has 4 columns but not sure how to get it done

This is my current code 

<ion-content>
    <ion-grid [virtualScroll]="photo_library">
      <ion-row *virtualItem="let photo" ng-if="$index % 4 === 0">
        <ion-col>
            <ion-img [src]="photo.avatarUrl"></ion-img>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>

But this generates a row and 1 column but I want dynamically to have 4 columns in one 1 row. How do i achieve that?

Kingsley Simon
  • 1,796
  • 3
  • 27
  • 65

1 Answers1

0
<ion-content>
    <ion-grid >
      <ion-row [virtualScroll]="photo_library" >
        <ion-col col-6 col-md-4 col-xl-3 *virtualItem="let photo ">
            <ion-img [src]="photo.avatarUrl"></ion-img>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>
Mohan Gopi
  • 7,080
  • 16
  • 57
  • 107