Invert Angular 2 *ngFor
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
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.
This should do the trick
<li *ngFor="user of users?.reverse()">
{{ user.name }} is {{ user.age }} years old.
</li>