ngFor to loop first and last objects in a list

Question

** 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>

What exactly is the problem here? Are you having trouble applying CSS based on the first and last objects? — Barremian
– Barremian, Commented Mar 14, 2020 at 20:06
I want to display the first element and the last element in the list eg.const HEROES = [ {id: 1, name:'Superman'}, {id: 2, name:'Batman'}, {id: 5, name:'BatGirl'}, {id: 3, name:'Robin'}, {id: 4, name:'Flash'} ]; — Gabriel Udo
– Gabriel Udo, Commented Mar 14, 2020 at 20:46

Barremian · Accepted Answer · 2020-03-14 21:06:10Z

2

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>

answered Mar 14, 2020 at 21:06

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ngFor to loop first and last objects in a list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related