Invert Angular 2 *ngFor

Question

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

Is it possible to invert the ngFor that the items are added bottom up?

Answer 1

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

Answer 2

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.