OrderBy pipe issue

by

I modified @Thierry Templier’s response so the pipe can sort custom objects in angular 4:

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

@Pipe({
  name: "sort"
})
export class ArraySortPipe  implements PipeTransform {
  transform(array: any, field: string): any[] {
    if (!Array.isArray(array)) {
      return;
    }
    array.sort((a: any, b: any) => {
      if (a[field] < b[field]) {
        return -1;
      } else if (a[field] > b[field]) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

And to use it:

*ngFor="let myObj of myArr | sort:'fieldName'"

Hopefully this helps someone.

More Related Contents:

  1. NgFor doesn’t update data with Pipe in Angular2
  2. Angular HTML binding
  3. angular2: Error: TypeError: Cannot read property ‘…’ of undefined
  4. Angular2: Cannot read property ‘name’ of undefined
  5. How can I write data attributes using Angular?
  6. Angular2 multiple router-outlet in the same template
  7. Angular 2 Scroll to top on Route Change
  8. Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘tr’ (final release)
  9. How to instantiate and apply directives programmatically?
  10. Is it possible to use a pipe in the code? [duplicate]
  11. Angular 4 Pipe Filter
  12. Angular 2 Read More Directive
  13. Angular2: How is ngfor expanded
  14. How to add “class” to host element?
  15. vs
  16. Angular2 – Interpolate string with html
  17. angular keyvalue pipe sort properties / iterate in order
  18. Angular 2 Dynamically insert a component into a specific DOM node without using ViewContainerRef
  19. Angular 2 input parameters on root directive [duplicate]
  20. What is let-* in Angular 2 templates?
  21. How to truncate text in Angular2?
  22. What is an impure pipe in Angular?
  23. Angular 2: How to write a for loop, not a foreach loop
  24. How to detect scroll to bottom of html element
  25. How to check the length of an Observable array
  26. How can I use ngFor to iterate over Typescript Enum as an array of strings
  27. How to use pipes in Angular 5 reactive form input
  28. Angular 2 disable sanitize
  29. Why angular 2 ngOnChanges not responding to input array push
  30. addControl to FormGroup dynamically in Angular

Leave a Comment