[SOLVED] ngFor and Ion-grid

Ionic Framework ionic-v3
1

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>
3 Likes
2

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
3

That works, thanks again @rapropos

5

Hi,

I reopen this topic because I’m facing to same issue. I would like the grid create automatically a new row after 4 columns. Below my code. I tried to put the col-6 attribute as you suggest but it’s not working

<ion-grid>
  
      <div class="categoryStyle"> 

      <ion-row >
  
        <ion-col col-6 *ngFor="let vehicleLine of vehicleLineArrayBusNumber; let indexArray = index;" (click)="goToDirection(vehicleLine, indexArray)">
         
          <p>{{vehicleLine}}</p>
        </ion-col>

  
      </ion-row>

  
    </div>
    </ion-grid>
6

I actually never use Ionic’s grid. I find ordinary CSS Grid much easier to work with.

 <div class="fruits">
   <div class="xc" *ngFor="let fruit of fruits">
     <span [innerText]="fruit"></span>
   </div>
 </div>

.fruits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.xc {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem;
}

export class AppComponent {
  fruits = [
    "apple", "blackberry", "cherry", "dragonfruit", "elderberry", "fig", "grapefruit",
    "apple", "blackberry", "cherry", "dragonfruit", "elderberry", "fig", "grapefruit",
    "apple", "blackberry", "cherry", "dragonfruit", "elderberry", "fig", "grapefruit",
    "apple", "blackberry", "cherry", "dragonfruit", "elderberry", "fig", "grapefruit",
    "apple", "blackberry", "cherry", "dragonfruit", "elderberry", "fig", "grapefruit",
    "apple", "blackberry", "cherry", "dragonfruit", "elderberry", "fig", "grapefruit",
    "apple", "blackberry", "cherry", "dragonfruit", "elderberry", "fig", "grapefruit",
    ];
}
7

Hi, Many thanks ! :slight_smile: I didn’t know this way.

In the meantime, I also found the way to do it with ion-grid. I used the parameter : "sizeLg=“3” sizeMd=“3” sizeXs=“3” as below :

<ion-col   sizeLg="3" sizeMd="3" sizeXs="3"   </ion-col>

it will automatically divide each column and go to the second row. The number “3” is the divider. As there are 12 columns per row, it will display 4 columns in my case.

2 Likes