[SOLVED] On ngfor, display the items one step at a time

Issue

So, i have an ngfor, with 3 items, and i would like to present them in steps, like questions in a form. For example, only showing the second question of the form, once the first step is answered.

I have an stackblitz code too see as reference.
https://stackblitz.com/edit/angular-ivy-oauzgh?file=src%2Fapp%2Fapp.component.html

Solution

Not sure that ngFor is the best way to do that, anyway you can add

<tr *ngFor="let hero of heroes; let i = index">
   <td *ngIf="i > currentIndex">{{hero.name}}</td>
   User do something and you increase the currentIndex
</tr>

In the ts you only need to declare the currentIndex and set it to 0 at init and a method to increase the index called by the html in the Do something block

Answered By – Jean-Xavier Raynaud

Answer Checked By – David Marino (BugsFixing Volunteer)