CODEWITHSUNDEEP
angularionic-frameworkionic3
Keyur Hardas
Keyur Hardas

Reputation: 53

How to add ion-slide dynamically?

I am using an ion grid inside an ion slide. What i want to achieve is - There are maximum 8 number of cards which will be placed on a 2*2 ion-grid which makes one ion-grid of 2*2 on each ion-slide.

But the number of cards are not constant to 8. I want to add another ion-slide when the cards length is more than 4 and the rest of the cards will go on the second ion-slide.

here is my HTML code -

<ion-slides pager>
  <ion-slide>
    <ion-grid>
      <ion-row>
        <ion-col *ngFor="let commodity of cardData" col-6>
          <ion-card
            class="animate__animated animate__flipInX"
            (click)="showDetails(commodity.CommodityId,commodity.CommodityCode)"
            [class.active]="selectedCard == commodity.CommodityId"
          >
            <ion-card-content>
              <ion-label class="header">{{commodity.CommodityCode}}</ion-label>
              <ion-item
                *ngFor="let month of commodity.Months_Data"
                class="cardContent"
              >
                <ion-label class="month">
                  {{month.Month}} : {{month.Trade_Quantity_2}} {{month.UOM}}
                  <ion-icon
                    name="{{month.Icon}}"
                    color="{{month.Icon == 'md-arrow-down'? 'danger' : 'MaterialGreen'}}"
                  ></ion-icon>
                </ion-label>
              </ion-item>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-slide>
</ion-slides>

currently it looks like this

enter image description here

If the cards are more than 4 then i want to add another ion-slide which will contain the next set of cards.

Upvotes: 0

Views: 814

Answers (1)

Alexis
Alexis

Reputation: 1784

You can 'split' your cardData array into an array of array, each array containing a maximum of 4 cards. Then in your template you can do something like the example below

I assume you called your array of array cardDatas

<ion-slides pager>
  <ion-slide *ngFor="let cardData of cardDatas">
    <ion-grid>
      <ion-row>
        <ion-col *ngFor="let commodity of cardData" col-6>
          <ion-card class="animate__animated animate__flipInX"
            (click)="showDetails(commodity.CommodityId,commodity.CommodityCode)"
            [class.active]="selectedCard == commodity.CommodityId">
            <ion-card-content>
              <ion-label class="header">{{commodity.CommodityCode}}</ion-label>
              <ion-item *ngFor="let month of commodity.Months_Data" class="cardContent">
                <ion-label class="month">
                  {{month.Month}} : {{month.Trade_Quantity_2}} {{month.UOM}} <ion-icon name="{{month.Icon}}"
                    color="{{month.Icon == 'md-arrow-down'? 'danger' : 'MaterialGreen'}}"></ion-icon>
                </ion-label>
              </ion-item>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-slide>
</ion-slides>

Upvotes: 2

Related Questions