CODEWITHSUNDEEP
angularangular7ionic4
Retry
Retry

Reputation: 43

Show *ngFor items one by one Ionic 4

I have a JSON object and I want to show the items one by one. When I use the Angular *ngFor all the items show on the screen. I want to show the first one and when I click the button show the next one until the last. I have tried using Angular *ngIf but I failed.

<ion-header>
 <ion-toolbar>
  <ion-buttons slot="start">
  <ion-icon size="large" color="warning" name="arrow-round-back" 
  (click)="abort()"></ion-icon>
  </ion-buttons>
 <ion-title></ion-title>
 </ion-toolbar>
</ion-header>

<ion-content padding>    
<ion-card *ngFor="let w of warmup;">
 <ion-card-header>
  <ion-card-title>
    {{w.title}}
  </ion-card-title>
  <ion-card-content>
    <img src="{{w.url}}">
  </ion-card-content>
</ion-card-header>
<ion-button slot="end" size="small" (click)="done">DONE</ion-button>
</ion-card>
</ion-content>

You can also see an image of what I mean:

enter image description here

Upvotes: 0

Views: 1534

Answers (2)

Murtuza
Murtuza

Reputation: 382

You will have to maintain another array which will hold the templates. 

<ion-card *ngFor="let w of warmupTemp;" [w]="w"></<ion-card>

And your ts file will be:

warmpup = []; // actual data array
warmupTemp= []; // template array
index = 0;
addWarmUp() {
    this.warmupTemp.push(warmup[index]);
    index++;
}

Upvotes: 0

Sheik Althaf
Sheik Althaf

Reputation: 1605

try to use angular slicePipe

https://angular.io/api/common/SlicePipe

create a noOfItem = 1 in your component ts

*ngFor="let w of warmup | slice:0:noOfItem"

Then control the noOfItem based on your logic

Upvotes: 1

Related Questions