CODEWITHSUNDEEP
angularionic-frameworkionic4
mina
mina

Reputation: 1912

ionic: print each photo in a row

I'm new with ionic I want to print each photo in the gallery in a row

<ion-grid>
    <ion-row>
    <ion-col col-6 *ngFor="let photo of photoService.photos">
        <img [src]="photo.data" />
        </ion-col>
    </ion-row>
</ion-grid>`

this print all the photos side by side however what I want is to have each photo in a row

more formally I want this: 

  `Foreach photo in photos 
      print the photo in an ion-row`

how to do this ?

Upvotes: 0

Views: 182

Answers (2)

user9088454
user9088454

Reputation: 1122

In ionic 4 many things are changed. Just replace size="6" with col-6. With this, you will get 2 photos in each row but you are after one photo show in each row then try second example. ex-1:

  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let photo of photoService.photos">
        <img [src]="photo.data" />
      </ion-col>
    </ion-row>
  </ion-grid>

ex-2:

  <ion-grid>
    <ion-row *ngFor="let photo of photoService.photos">
      <ion-col>
        <img [src]="photo.data" />
      </ion-col>
    </ion-row>
  </ion-grid>

Also, you can use ionic card view, it will look better view:

  <ion-grid>
    <ion-row *ngFor="let photo of photoService.photos">
      <ion-card>
        <img [src]="photo.data" />
      </ion-card>
    </ion-row>
  </ion-grid>

Upvotes: 1

mina
mina

Reputation: 1912

I did this and it works

 <ion-grid>
    <ion-row *ngFor="let photo of photoService.photos">
        <ion-col>
           <img [src]="photo.data" />
        </ion-col>
    </ion-row>
 </ion-grid>

Upvotes: 0

Related Questions