Invert Angular 2 *ngFor

You need to implement a custom pipe that leverage the reverse method of JavaScript array:

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

@Pipe({ name: 'reverse' })

export class ReversePipe implements PipeTransform {
  transform(value) {
    return value.slice().reverse();
  }
}

You can use it like that:

<li *ngFor="let user of users | reverse">
    {{ user.name }} is {{ user.age }} years old.
</li>

Don't forget to add the pipe in the pipes attribute of your component.


You can simply use JavaScript's .reverse() on the array. Don't need an angular specific solution.

<li *ngFor="#user of users.slice().reverse() ">
   {{ user.name }} is {{ user.age }} years old.
</li>

See more here: https://www.w3schools.com/jsref/jsref_reverse.asp

Tags:

Angular