Index number in descending order

Question

My table contains indexing number and when i add a new row its should show me in 2,1,0 i need current value in the top index number 2.As per my code its working 0,1,2. But i need it in 2,1,0.

This is my html file `

<mat-table #table [dataSource]="dataSource"  *ngFor="let field of fieldArray | reverse; let i = index " [attr.data-index]="i" >                 
<ng-container matColumnDef="SrNo">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element" >                 
<div>{{i}}</div>
</mat-cell>
</ng-container>

Here is my pipe code

import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
  name: 'reverse',
  pure: false
})
export class ReversePipe implements PipeTransform {

transform (values) {
    return values.reverse();
  }
}

Could you reverse the order of your dataSource or fieldArray in your component ts file? — CMR, Mar 04 '19 at 16:20
datasource would reverse the value but i need index to be reversed — chrizel, Mar 04 '19 at 16:24

ylerjen · Answer 1 · 2019-03-05T09:41:09.893

1

As it seems you just want the index to be reversed, not the items, instead of using the reverse and displaying the i directly, you could do :

[attr.data-index]="fieldArray.length - i"

and

<div>{{fieldArray.length - i}}</div>

That way you'll get ...,2,1,0 instead of 0,1,2...

edited Mar 05 '19 at 09:41

answered Mar 04 '19 at 16:26

ylerjen

4,109
2
25
43

,Ohh great its working thank you Since i have added it in datasource even header is repeating along with row so how can i avoid header displaying multiple times with row. I tried adding ngFor in separate div but in that case row is not adding.so were will i add ngFor so that header should not repeat – chrizel Mar 04 '19 at 16:38

score 0 · Answer 2 · answered Mar 04 '19 at 16:26

0

You can sort directly the array "fieldArray" you dont need to use a pipe.

fieldArray.sort((a, b) => a < b? 1 : 0);

answered Mar 04 '19 at 16:26

Abel Valdez

2,368
1
16
33

Index number in descending order

2 Answers2