Show *ngFor items one by one Ionic 4

Question

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:

Answer 1

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