CODEWITHSUNDEEP
angularionic-frameworkngfor
Gabriel Geelario
Gabriel Geelario

Reputation: 237

ngFor to loop first and last objects in a list

** Good day house, Please I am having difficulties trying to use *ngFor to retrieve first and last objects of an array**

<ion-item *ngFor="let payment of allPaymentGateways; let first = first; let last = last "              [ngClass]="{first: first, last: last}">
                <ion-label>
                  <ion-row class="full" class="align-items-center">
                    <ion-col size="10">
                      <ion-row class="align-items-center">
                        <p class="no-margin">
                          <strong>{{ payment.method_title }}</strong>
                        </p>
                      </ion-row>
                      <ion-row class="align-items-center">
                        <p>{{ payment.description }}</p>
                      </ion-row>
                    </ion-col>
                  </ion-row>
                </ion-label>
                <ion-radio slot="start" (click)="choosePaymnetGateway(payment)"></ion-radio>
              </ion-item>

Upvotes: 0

Views: 476

Answers (1)

Barremian
Barremian

Reputation: 31125

To display only first and last items in the array, use *ngIf directive. Try the following

<ion-item *ngFor="let payment of allPaymentGateways; let first=first; let last=last" [ngClass]="{first: first, last: last}">
  <ng-container *ngIf="first || last">
    <ion-label>
      <ion-row class="full" class="align-items-center">
        <ion-col size="10">
          <ion-row class="align-items-center">
            <p class="no-margin">
              <strong>{{ payment.method_title }}</strong>
            </p>
          </ion-row>
          <ion-row class="align-items-center">
            <p>{{ payment.description }}</p>
          </ion-row>
        </ion-col>
      </ion-row>
    </ion-label>
    <ion-radio slot="start" (click)="choosePaymnetGateway(payment)"></ion-radio>
  </ng-container>
</ion-item>

Upvotes: 2

Related Questions