Custom sorting pipe for Angular 6 [duplicate]

Question

I am trying to sort my data in the ngFor loop , but my custom pipe doesnot work as intened , can anybody help me out...

  export class OrderbyLastMessagePipe implements PipeTransform {

  transform(array: Array<string>, args?: any): Array<string> {

    if (array !== undefined && array !== null && args !== '') {

      console.log('args', array);

        const direction = args === 'desc' ? 1 : -1;
        array.sort((a: any, b: any) => {

          console.log('args', a);

          if (a['lastUpdatedat'] < b['lastUpdatedat']) {
                return -1 * direction;
            } else if (a['lastUpdatedat'] > b['lastUpdatedat']) {
                return 1 * direction;
            } else {
                return 0;
            }
        });
    }
    return array;
}

My Component ng container is this , i am using two filters one for search and another for sort on specific lastupdatedat value which is the timestamp ...

 <ng-container *ngFor="let User of uLists | orderbyLastMessage:'uLists':true">

angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe — JB Nizet
– JB Nizet, Commented Nov 20, 2018 at 17:24
@JBNizet that doesnot help ... can please point out what am i doing wrong ... — Ankit Prajapati
– Ankit Prajapati, Commented Nov 20, 2018 at 17:36
Please provide some example data for uLists. Quick note: if uLIsts is a list of objects with lastUpdatedat properties, your pipe probably shouldn't accept a array of string. — ShaneCoder
– ShaneCoder, Commented Nov 20, 2018 at 19:12
The obvious wrong thing is that you're modifying the array, instead of returning a sortted copy. But as the article explains, you shouldn't have a filter pipe, and you shouldn't have a sort pipe. If you want more help, you need to clearly define "doesn't work". — JB Nizet
– JB Nizet, Commented Nov 20, 2018 at 20:29

ShaneCoder · Accepted Answer · 2018-11-20 21:49:05Z

0

Two recommendations:

If you used angular CLI to generate your pipe, it's name is orderByLastMessagePipe. You can see this in your code like such:

@Pipe({name: 'orderByLastMessagePipe'})
The parameters you are passing to your pipe will always cause it to sort ascending. With angular pipes, multiple parameters are delimited by :. The orderbyLastMessage:'uLists':true" should be orderbyLastMessage:'desc' to sort descending, and orderbyLastMessage to sort ascending, or orderbyLastMessage:'asc'.

Change your template to:

<ng-container *ngFor="let User of uLists | searchUser:filterUser | orderbyLastMessagePipe:'desc'">

See if that fixes your sorting.

Edit

The array parameter to your pipe is obviously not an Array<string>. If you have a specific type for the objects in your array, the parameter should be typed to that Array<SomeObject>. If not, any will do Array<any>, or just any.

This answer is NOT the correct way to do sorting due to poor performance as pointed out in previous comments. Just trying to answer the specific question that is asked.

edited Nov 20, 2018 at 21:49

answered Nov 20, 2018 at 21:30

ShaneCoder

7814 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ankit Prajapati Over a year ago

Changing this orderbyLastMessagePipe:'desc' also doesnot sort

Collectives™ on Stack Overflow

Custom sorting pipe for Angular 6 [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related