ionic 2: Display array of items in a 3x3 table

Question

I have an array of items I would like to display in a 3x3 table like display as follows:

In order to achieve that, I sliced my array into 3 arrays of 3 and displayed it as follows:

<ion-grid no-padding class="home-gallery">
    <ion-row *ngFor="let row of items | async">
        <ion-col *ngFor="let item of row">
            <div class="products_list">
                <div class="products_list_img">
                    <img [src]="item.previewImage" (click)="showItem($event, item)"/>
                </div>    
            </div>
        </ion-col>
    </ion-row>
</ion-grid>

Is there a way to achieve this display while keeping my array flattened?

I reckon you should use Flexbox to display the results, see answer below. — Kostas Siabanis, Aug 22 '17 at 15:20
`keeping my array flattened` can you please explain this , what i am guessing is that you dont want to have two for loops to go fetch objects, is that so ? — Rahul Singh, Aug 22 '17 at 15:22

Gabriel Barreto · Accepted Answer · 2017-08-22T19:13:22.290

You don't need 3 arrays, just need to understand more about the grid system. It's a 12 columns row, so if it's going to pass 12 columns it pushes the item down and "create" another row, so with a single array do

<ion-grid no-padding class="home-gallery">
    <ion-row>
        <ion-col col-4 *ngFor="let item of items | async"> <!-- JUST ADD A col-4 attribute -->
            <div class="products_list">
                <div class="products_list_img">
                    <img [src]="item.previewImage" (click)="showItem($event, item)"/>
                </div>    
            </div>
        </ion-col>
    </ion-row>
</ion-grid>

So the col-4 will specify to your grid that this tag will take up to 4 columns of the 12 for all screens size.

Hope this helps

This is definitely the best way to achieve the desired layout using Ionic — sebaferreras, Aug 22 '17 at 19:45

score 1 · Answer 2 · answered Aug 22 '17 at 15:24

1

Use Flexbox to display the results like:

.home-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

And only use one *ngFor to fetch your single array;

answered Aug 22 '17 at 15:24

Kostas Siabanis

2,989
2
20
22

score 0 · Answer 3 · answered Aug 22 '17 at 15:44

Usually, doing this in template is a bad idea, because template becomes too complicated and hard to read:

<ion-grid no-padding class="home-gallery">
    <ion-row *ngFor="let rowN of [0,1,2]">
      <ng-container *ngFor="let colN of [0,1,2]">
        <ion-col *ngFor="let item of (flatList | async).slice(rowN*3+colN, rowN*3+colN+1)">
            <div class="products_list">
                <div class="products_list_img">
                    <img [src]="item.previewImage" (click)="showItem($event, item)"/>
                </div>
            </div>
        </ion-col>
      </ng-container>
    </ion-row>
</ion-grid>

Thanks, but this seems way too complicated – Omri Btian Aug 22 '17 at 19:16 — Omri Btian, Aug 22 '17 at 19:16

ionic 2: Display array of items in a 3x3 table

3 Answers3

Linked