*ngFor Angular Ionic Grid population

Question

I'm new at developing. I'm trying to draw a Row with 2 cells each contains a Category

<ion-grid>
<ion-row *ngFor="let categorie of categories">
  <ion-col>
    <img [src]="categorie.image" />
  </ion-col>
  <ion-col>
    <img [src]="categorie.image" />
  </ion-col>
</ion-row>

What I'm getting and it's kind of obvious the same category in both cells. I got like 20 categories so there should be 10 rows, 20 cells.

Update

Abdelrhman Hussien, as per your comment, the desire outcome would be per my case:

QTY of Categories: 21 or even more

OUTCOME: 11 Rows Each row containing 2 Categories last Row only contains 1 category even thought you still have 2 cells in last row.

Answer 1

Try this code. It worked for me.

<ion-grid>
            <ion-row no-padding>
              <ion-col col-6 *ngFor="let categorie of categories">
                      <img [src] ="categorie.image" />
              </ion-col>
            </ion-row>
</ion-grid>

A grid in ionic is made up of 12 columns. So if your image takes 6 columns you'll get the desired output.

https://ionicframework.com/docs/v3/components/#grid

https://ionicframework.com/docs/v3/api/components/grid/Grid/