CODEWITHSUNDEEP
androidhtmlionic-frameworkgridviewionic3
david
david

Reputation: 666

Showing data with index value in grid view

Here is my code :

<ion-grid no-padding>
    <ion-row *ngFor="let item of items"  let i=index no-padding>
      <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3>
        <ion-card [ngStyle]="{'background': 'url(' + item.PImage + ')'}"> 
          <div *ngIf="item.Ptype == 'cash'" class="cash-cat-icon"></div>
          <div *ngIf="item.Ptype == 'cheque'" class="cheque-cat-icon"></div>   
          <div>
          <h2 item-title >{{item.pName}}</h2>
          <h4 item-title >RS: {{item.PPrice}}</h4>
          </div>
        </ion-card>
      </ion-col>
      <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3>
          <ion-card [ngStyle]="{'background': 'url(' + item.PImage + ')'}"> 
            <div *ngIf="item.Ptype == 'cash'" class="cash-cat-icon"></div>
            <div *ngIf="item.Ptype == 'cheque'" class="cheque-cat-icon"></div>   
            <div>
            <h2 item-title >{{item.pName}}</h2>
            <h4 item-title >RS: {{item.PPrice}}</h4>
            </div>
          </ion-card>
        </ion-col>
    </ion-row>
  </ion-grid>

Now my data is like : { name1, name2, name3, name4, name5, name6 }

But in my screen I am getting like :

name1  name1
name2 name2
name3 name3
name4 name4

But i want like :

name1 name2
name3 name4
name5 name6

Please help me out.How can I achieve this! I know to keep index but don't know how to show that values in the respective grid

Upvotes: 1

Views: 156

Answers (1)

Abinesh Joyel
Abinesh Joyel

Reputation: 2093

Wrap the ion-col in ng-container and give condition to enter only for even index

 <ion-grid no-padding>
    <ion-row  no-padding *ngFor="let item of items;let i=index">
      <ng-container *ngIf="i % 2 == 0">
      <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i < items.length">
        <ion-card [ngStyle]="{'background': 'url(' + items[i].PImage + ')'}"> 
          <div *ngIf="items[i].Ptype == 'cash'" class="cash-cat-icon"></div>
          <div *ngIf="items[i].Ptype == 'cheque'" class="cheque-cat-icon"></div>   
          <div>
          <h2 item-title >{{items[i].pName}}</h2>
          <h4 item-title >RS: {{items[i].PPrice}}</h4>
          </div>
        </ion-card>
      </ion-col>
      <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i + 1 < items.length">
       <ion-card [ngStyle]="{'background': 'url(' + items[i+1].PImage + ')'}"> 
          <div *ngIf="items[i+1].Ptype == 'cash'" class="cash-cat-icon"></div>
          <div *ngIf="items[i+1].Ptype == 'cheque'" class="cheque-cat-icon"></div>   
          <div>
          <h2 item-title >{{items[i+1].pName}}</h2>
          <h4 item-title >RS: {{items[i+1].PPrice}}</h4>
          </div>
        </ion-card>
      </ion-col>
      </ng-container>
</ion-row>
</ion-grid>

pls check the demo

Upvotes: 1

Related Questions