Angular - How to sort by last name pipe

Question

For my Angular project, I want to display the EmpID values in a combo box and have them sorted by the last name.

Here's an html snippet where I'm trying to implement the pipe.

    <select id="empName" [(ngModel)]="selectedEmployee">
      <option selected="selected" disabled>Employee Name...</option>
      <option *ngFor="let emp of empInfo; let i = index" [ngValue]="i">{{emp.EmpID | orderByLast}}</option>
    </select>

and here's my orderByLast.pipe.ts :

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

@Pipe({ name: 'orderByLast' })

export class OrderByLast implements PipeTransform {
    transform(array: Array<string>): Array<string> {
        array.sort((a: any, b: any) => {
            if (a < b) {
                return -1;
            }
            else if (a > b) {
                return 1;
            }
            else {
                return 0;
            }
        });
        return array;
    }
}

and here's my emp-info.ts array:

export class EmpInfo {
    EmpKey: number;
    EmpID: string;
    Firstname: string;
    LastName: string;
    EmpStat: string;
    StartDate: Date;
    AdjustedStart: Date;
    Anniversary: number;
    PTOYear: number;
    STDLTD: number;
    Uncharged: number;
    ETOEarned: number;
    ETORequests: number;
    ETORemaining: number;
    PTOBase: number;
    PTOCarry: number;
    PTOBorrowed: number;
    PTOBalance: number;
    PTORequests: number;
    PTORemaining: number;
}

What is the structure of an emp object ? Nobody can guess it... — n00dl3
– n00dl3, Commented Jun 5, 2017 at 14:43
Do not sort with pipes. If you really want to anyway, then just read the documentation. You'll need to implement the transform method. — user663031
– user663031, Commented Jun 5, 2017 at 14:44

Tamas · Accepted Answer · 2017-06-05 14:51:32Z

1

You need to implement a transform function:

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

@Pipe({ name: 'orderByLast' })

export class OrderByLast implements PipeTransform {
  transform() { // add your object as a parameter to transform()
    //write your code to do the sort
  }
}

See the 'Custom Pipes' section here: https://angular.io/docs/ts/latest/guide/pipes.html (Please note that as @torazaburo pointed it out it's not recommended to do sorts using pipes which is also explained in the link under the 'Appendix: No FilterPipe or OrderByPipe' section.)

edited Jun 5, 2017 at 14:51

answered Jun 5, 2017 at 14:45

Tamas

11.3k15 gold badges53 silver badges80 bronze badges

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

3 Comments

user663031 Over a year ago

It's odd that you would cite a reference which recommends against doing sorting with pipes (see angular.io/docs/ts/latest/guide/…).

Tamas Over a year ago

You pointed this out to the person asking as well - it's up to them whether they'll go and read this and adhere to it, or not. Let me do a quick update to my post.

rcarcia02 Over a year ago

@torazaburo I've updated by post with the code that i put in orderbylast.pipe.ts and it's just printing out a blank combo box. what would I do differently?

Nehal · Accepted Answer · 2017-06-05 14:58:32Z

1

See this example. I implemented this orderBy pipe few months ago in my own app. https://stackoverflow.com/a/39650432/5556177

answered Jun 5, 2017 at 14:58

Nehal

13.3k4 gold badges48 silver badges59 bronze badges

Collectives™ on Stack Overflow

Angular - How to sort by last name pipe

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related