How to iterate the ngFor in reverse


I have an array called dewList. I was to iterate or get the values in the reverse order.
<ion-item *ngFor="let list of dewList" >

I have tried it with the
<ion-item *ngFor="let list of dewList.slice().reverse()" >
But I’m getting an error as

ERROR TypeError: _co.dewList.slice is not a function
    at Object.eval [as updateDirectives]

How Can I solve this?


This would be an Angular question, so I would look on Stack Overflow or the Angular doc.

My guess would be either run the data through a pipe or transform it with the component code.


You can try doing like this:

<div *ngFor="let list of dewList; let i=index;">
{{dewList[dewList.length - 1]}}

Hope this solutions helps you


You could also try implementing a seperate ‘reversedList’ variable in your typescript, and iterate over this new list like normal in your template


reversedList: Array<any> = [];


this.reversedList: = dewList.slice().reverse();


<ion-item *ngFor="let item of reversedList">
    {{ item }}

When I use it as

.then((items: any) => {
    this.dewList= items.slice().reverse();

Then it pops an error as

TypeError: items.slice is not a function


Does changing the promise result to (items: Array<any>) help?


Then it’s showing error as

Argument of type ‘(items: any) => void’ is not assignable to parameter of type ‘(value: Observable) => void | PromiseLike’.
Types of parameters ‘items’ and ‘value’ are incompatible.
Type ‘Observable’ is missing the following properties from type ‘any’: length, pop, push, join, and 17 more.


Did my solution work for your case? Try using reverse() method instead for array before using it in your html.


ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed This is the error I’m getting for your ans


if ‘items’ is an Observable, you could subscribe to it and use the async pipe in the template

<ion-item *ngFor="let item of (items | async).?reverse()">
   {{ item }}

reference: Angular stack overflow
(chickenninja565’s answer)

Uncaught Error: Template parse errors:
Parser Error: Unexpected token ?, expected identifier or keyword

Oh shoot it should be ?.
The question mark allows the view to still load if the variable has no value yet


qww qww1


the question mark should be before the period

<ion-item *ngFor="let item of (dewList | async)?.reverse()">  //<-- i used the wrong var name

that way, the template will still render the page if there isnt an immediate value for ‘items’

ERROR Error: Uncaught (in promise): Error: InvalidPipeArgument: '' for pipe 'AsyncPipe'
Error: InvalidPipeArgument: '' for pipe 'AsyncPipe'

will this help you


you could try this
<ion-row *ngFor=“let data of calArr.slice().reverse()”>


This works perfect to me. Thanks!