Ionic / Angular show latest added item on top (.reverse() not doing the job)-CodePudding

I am using Ionic / Angular in a project.

I have a variable where items are added at runtime by the user.

In my .ts file I have:

list: any[] = [];

then here is the html:

<ion-list *ngFor="let data of list; let i = index" id="{{i}}">
  <ion-item>
    <ion-label>{{ data.name }}</ion-label>
  </ion-item>
</ion-list>

My issue is that I need to force it to display the latest added on top.

I've tried adding .reverse() like this:

<ion-list *ngFor="let data of list.reverse(); let i = index" id="{{i}}">
  <ion-item>
    <ion-label>{{ data.name }}</ion-label>
  </ion-item>
</ion-list>

...but nothing changed.

How can I do this?

CodePudding user response：

you can use .unshift() method to add item on top instead of reversing the List.