angular 2 sort and filter

by

This isn’t added out of the box because the Angular team wants Angular 2 to run minified. OrderBy runs off of reflection which breaks with minification. Check out Miško Heverey’s response on the matter.

I’ve taken the time to create an OrderBy pipe that supports both single and multi-dimensional arrays. It also supports being able to sort on multiple columns of the multi-dimensional array.

<li *ngFor="let person of people | orderBy : ['-lastName', 'age']">{{person.firstName}} {{person.lastName}}, {{person.age}}</li>

This pipe does allow for adding more items to the array after rendering the page, and still sort the arrays with the new items correctly.

I have a write up on the process here.

And here’s a working demo: http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby and https://plnkr.co/edit/DHLVc0?p=info

EDIT: Added new demo to http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby

EDIT 2: Updated ngFor to new syntax

More Related Contents:

  1. How do I share data between components in Angular 2?
  2. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  3. How to get query parameters from URL in Angular 5?
  4. In Angular, What is ‘pathmatch: full’ and what effect does it have?
  5. Angular2 – FormControl Validation on blur
  6. Getting “Uncaught (in promise): TypeError: Object(…) is not a function” Error from Ionic-native VideoEditor Plugin
  7. How to inject service into class (not component)
  8. Angular4 Exception: Can’t bind to ‘ngClass’ since it isn’t a known property of ‘input’
  9. No provider for AngularFireDatabase, AngularFireAuth
  10. Multiple canActivate guards all run when first fails
  11. TS2531: Object is possibly ‘null’
  12. How to make a sequence of http requests in Angular 6 using RxJS
  13. Custom ExceptionHandler change detection lag
  14. Trigger update of component view from service – No Provider for ChangeDetectorRef
  15. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  16. Pass parameter into route guard
  17. Typescript dependency injection public vs private
  18. Rxjs Retry with Delay function
  19. What is the meaning of question mark in expressions in Angular 2?
  20. Merging http observables using forkjoin
  21. Subscribing to a nested Observable
  22. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  23. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  24. How to return observable from subscribe
  25. How to mock Angular 4.3 httpClient an error response in testing
  26. Angular 2 creating reactive forms with nested components
  27. Limit input field to two decimal places – Angular 5
  28. Angular 6 – how to mock router.events url response in unit test
  29. How to create and download text/Json File with dynamic content using angular 2+
  30. Angular4 Load external html page in a div

Leave a Comment