How to show last item first in ngFor in Angular?

Question

I have basic ngFor directive for display data from an Array, And i want to show the last item of array at the top and last item of array at bottom of result?

I saw few Questions in here tell not to use pipes on ngFor. So how can i achieve this behavior in TypeScript.

Thanks in advance.

angularJS has simple syntax to accomplish this. angular does not. it's best to just sort your array in javascript. — Rick, Jun 06 '20 at 19:40

mr. pc_coder · Answer 1 · 2020-06-06T19:28:55.327

9

You can also use something in html like if only take last one to first. Updated answer thanks to @Eliseo' s nice approach.

<p *ngIf="list.length>0">{{list[list.length-1]}}</p>
<ng-container *ngFor="let item of list; let last=last">
   <p *ngIf="!last"> {{item}}</p>
</ng-container>

edited Jun 06 '20 at 19:28

answered Jun 06 '20 at 15:56

mr. pc_coder

16,412
3
32
54

1

you can use in *ngFor, `let last=last` and `*ngIf="!last"` – Eliseo Jun 06 '20 at 19:26
Yes better suggestion to use rather than index @Eliseo . Updated answer related your suggestion – mr. pc_coder Jun 06 '20 at 19:30

score 1 · Accepted Answer · answered Jun 06 '20 at 15:30

1

You should use sort function to your array in code. Or create a dublicate for origin array and sort it instead.

answered Jun 06 '20 at 15:30

Anton Marinenko

2,749
1
10
16

How to show last item first in ngFor in Angular?

2 Answers2