2

How Can i reverse without changing positions of elements in an array, should just update the view with a pipe

I can use array.reverse() but that places the first item at the last and so on so elements index changes

Here is stackblitz code which I am stuck at

    import { Component } from '@angular/core';

export interface Order {
  value: string;
  viewValue: string;
}

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {

  transform(value: any[], arg: string): any {
    console.log('value', value);
    console.log('args', arg);

    if (arg === 'desc') {
      return value.reverse();
    }

    if (arg === 'asc') {
      return value;
    }
  }

}

/**
 * @title Basic select
 */
@Component({
  selector: 'select-overview-example',
  template: `<h4>Basic mat-select</h4>
<mat-form-field>
    <mat-label>Sort Order</mat-label>
    <mat-select value='asc'>
        <mat-option *ngFor="let order of orders" (click)="changeOrder(order.value)" [value]="order.value">
            {{order.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>


<ul>
    <li *ngFor="let item of items| orderBy : sort; index as i">{{i}} -> {{item}}</li>
</ul>`,
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  orders: Order[] = [
    { value: 'asc', viewValue: 'Ascending' },
    { value: 'desc', viewValue: 'Descending' }
  ];

  items: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  sort: string = 'asc';

  changeOrder(val: string) {

    console.log('val', val);

    this.sort = val;
  }

}
6
  • 1
    Possible duplicate of angular 2 sort and filter Commented Jun 26, 2019 at 19:29
  • Angular has a whole appendix about why they got rid of orderby here: angular.io/guide/pipes#no-filter-pipe Commented Jun 26, 2019 at 19:31
  • @adamdport thanks for the info, edited my question Commented Jun 26, 2019 at 20:13
  • Could you just clone the array let clone = yourArray.slice(0) and use the clone for display? Commented Jun 26, 2019 at 23:49
  • 1
    Sure, or you can sort the clone as many times as you want without affecting the original array. Just an idea, I haven't needed it. It looks like that's what Material's table does Commented Jun 27, 2019 at 13:27

3 Answers 3

4

Our main problem is to change view only in reverse order. so no need to update logic. only update CSS.

If items are display using flex-box CSS, then we can reverse it by using flex-direction property.

    flex-direction : row;
    flex-direction: column;
    flex-direction: row-reverse;
    flex-direction: column-reverse;

and if items are display using UL and LI, then apply below css for reverse Order. like below :

ul {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
ul > li {
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
Sign up to request clarification or add additional context in comments.

Comments

0

You can clone your array using let clone = myArray.slice();. Reordering the clone will not impact the original array. It looks like that's what Material's table does.

Comments

0

You can make a custom pipe for sorting asc or desc and sort your array

##TEMPLATE##
<div *ngFor="let order of Orders | orderBy:'asc'">

##PIPE##
export class OrderByPipe  implements PipeTransform {
transform(orders: any[], field: string): any[] {
    orders.sort((a: any, b: any) => {
    if (a[field] < b[field]) {
     return -1;
    } else if (a[field] > b[field]) {
      return 1;
    } else {
        return 0;
    }
    });
    }
}

6 Comments

Can you please add this in stackblitz link above so that i can understand better and why do i need to create a new pipe just to do a simple sort ?
in angularjs, they orderby in ng-repeat is a 'pipe', but new Angular doesn't have the pipe like that: angular.io/guide/pipes. That's why you need to create a custom pipe, or you can just sort the array before looping.
@RoliverJavier Thanks but this is same as array.reverse() it actually changes the array index if you desc 0 index now contains 10
mmmm, you can't sort an array and expect its indexes to stay the same, for that i would create an array of object and then add an id property. stackblitz.com/edit/angular-edswgw-avsvrq
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.