Angular 2 : iterate in reverse direction using ngFor

Question

Is there a pipe/ syntax that let's you iterate over a collection in reverse order using the ngFor directive ?

Maybe [this answer](http://stackoverflow.com/a/35703364/5357459) will help — adriancarriger, Dec 23 '16 at 05:21
Actually i just realized that a pipe is anyway not possible because angular 2 does not allow it with assignable expressions ... — Aman Gupta, Dec 23 '16 at 05:21
why don't you simply reverse the array and save it in property and use it with ngFor directive, like *ngFor="let item of reverseArray" ? — A.T., Dec 23 '16 at 05:27
I don't want to do it because I only need to reverse it while displaying the values , but have no further use of the reversed array within the model — Aman Gupta, Dec 23 '16 at 05:31
I added an implementation to http://stackoverflow.com/a/35703337/217408 (not actually tested though) — Günter Zöchbauer, Dec 23 '16 at 05:32

Avnesh Shakya · Answer 1 · 2016-12-23T05:28:17.200

3

Create custom filter:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverse',
  pure: false
})
export class ReversePipe {
  transform(value) {
    return value.slice().reverse();
  }
}

Use in your template:

<li *ngFor="let row of collection | reverse">
    ...
</li>

Hope it will work for you.

edited Dec 23 '16 at 05:28

answered Dec 23 '16 at 05:22

Avnesh Shakya

3,828
2
23
31

1

See comment on Vinays answer. – Günter Zöchbauer Dec 23 '16 at 05:23
@GünterZöchbauer Ya correct, then we have to use impure pipe. – Avnesh Shakya Dec 23 '16 at 05:27

Angular 2 : iterate in reverse direction using ngFor

1 Answers1