CODEWITHSUNDEEP
javascriptangularangular2-pipe
Hamburgersn Heroin
Hamburgersn Heroin

Reputation: 207

Angular 2 ngFor - reverse order of output using the index

Trying to learn something about filtering and ordering in Angular 2. I can't seem to find any decent resources and I'm stuck at how to order an ngFor output in reverse order using the index. I have written the the following pipe put it keeps giving me errors that array slice in not a function.

@Pipe({
    name: 'reverse'
})
export class ReversePipe implements PipeTransform {
    transform(arr) {
        var copy = arr.slice();
        return copy.reverse();
    }
}

and my ngfor looks like this.

<div class="table-row generic" *ngFor="let advert of activeAdverts | reverse let i = index;" [attr.data-index]="i" (click)="viewAd(advert.title)">      
    <div class="table-cell white-text">{{ i+1 }}</div>                    
    <div class="table-cell white-text">{{advert.title}}</div>
    <div class="table-cell green-text">{{advert.advert}}</div>
</div>

Upvotes: 13

Views: 32577

Answers (9)

Vinutha K Shetty
Vinutha K Shetty

Reputation: 307

*ngFor="let advert of activeAdverts.reverse()"

Simplest way as it should be, this worked for me

Upvotes: 0

Surya R Praveen
Surya R Praveen

Reputation: 3745

Use the default Angular Reverse method on ngFor

<div class="table-row generic" *ngFor="*ngFor="let advert of activeAdverts.slice().reverse() let i = index;" [attr.data-index]="i" (click)="viewAd(advert.title)">     
    <div class="table-cell white-text">{{ i+1 }}</div>                    
    <div class="table-cell white-text">{{advert.title}}</div>
    <div class="table-cell green-text">{{advert.advert}}</div>
</div>

Upvotes: 0

Trilok Singh
Trilok Singh

Reputation: 1353

Use this

*ngFor="let item of items.slice().reverse()"

Upvotes: 3

Sampath
Sampath

Reputation: 65920

Lodash reverse worked for me.

import { reverse} from "lodash";

this.cloudMessages = reverse(this.cloudMessages)

Upvotes: 0

Mark Florence
Mark Florence

Reputation: 363

I think @BhaskerYadav gave the best answer. Changing the original array is a bad idea and his/her idea has no side-effects, performance or otherwise. IMHO it just needs a slight improvement as all that index dereferencing is unreadable at scale.

<tr *ngFor="let _ of activeAdverts; let i = index">
  <ng-container *ngIf="activeAdverts[activeAdverts.length-i-1] as advert">
    <td>{{advert.p}}</td>
    <td>{{advert.q}}</td>
    ...
  </ng-container>
</tr>

Upvotes: 7

Chris Skura
Chris Skura

Reputation: 161

I would add .slice() as well

*ngFor="let advert of activeAdverts.slice().reverse() let i = index;"

Upvotes: 13

Pini Cheyni
Pini Cheyni

Reputation: 5437

The most simple way I was able to make it work is to just use activeAdverts.reverse(). In your case:

<div class="table-row generic" *ngFor="let advert of activeAdverts.reverse() let i = index;" [attr.data-index]="i" (click)="viewAd(advert.title)">      
    <div class="table-cell white-text">{{ i+1 }}</div>                    
    <div class="table-cell white-text">{{advert.title}}</div>
    <div class="table-cell green-text">{{advert.advert}}</div>
</div>

I found this answer to do the trick

Upvotes: 2

BhaskerYadav
BhaskerYadav

Reputation: 589

Using the following method u can reverse the output, but orignal array won't be modified,

 <tr *ngFor="let advert of activeAdverts; let i = index" >
           <td>{{activeAdverts[activeAdverts.length-i-1]}}</td>
  </tr>

Upvotes: 4

D_R
D_R

Reputation: 4972

For such common use cases, I would suggest you to use reverse pipe from ng-pipes module: https://github.com/danrevah/ng-pipes#reverse-1

From the DOCS:

in the controller:

this.items = [1, 2, 3];

in the view:

<li *ngFor="let item of items | reverse"> <!-- Array: [3, 2, 1] -->

Upvotes: 12

Related Questions