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
– Rick, Commented Jun 6, 2020 at 19:40

Cagri Tacyildiz · Accepted Answer · 2020-06-06 19:28:55Z

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 6, 2020 at 19:28

answered Jun 6, 2020 at 15:56

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eliseo Over a year ago

you can use in *ngFor, let last=last and *ngIf="!last"

Cagri Tacyildiz Over a year ago

Yes better suggestion to use rather than index @Eliseo . Updated answer related your suggestion

Anton Marinenko · Accepted Answer · 2020-06-06 15:30:42Z

1

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

answered Jun 6, 2020 at 15:30

Anton Marinenko

3,1401 gold badge12 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to show last item first in ngFor in Angular?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related