This story has been updated with another add-on feature to the pipe. If you have already been thru the below story, you can directly head to below link else you can continue reading further. The updated pipe contains better tree shaking using ES6 modules and type checking facility.
One very common feature that any app would be consisting of is a sorting algorithm to sort different kinds of information/data. It’s always reasonable to design something that’s reusable rather than doing it for a specific requirement, one such feature is SORTING/ORDERING data. Initially, in angularjs we had filters which now in angular is addressed as pipes, these are very small simple but very powerful features. Pipes can be a perfect fit in many use cases like.
- formatting the displayed information
- transforming/changing the values without affecting the true data source
- restructuring your data, like sorting it.
Yes, but why pipe, why cant we just use a function & get this done. Functions are also supposed to be reusable, that’s true but angular views will display whatever information we have stored & are displaying something like below
we have a list of cars & using the ngFor directive of angular we can list it all out in anyway we want, but we want to display the list of cars in alphabetical order. Hence, we need to re-order our array in order to display it in a proper sequence we can achieve this by just using array function but what about sorting data maybe in some other views as well, we just can’t go ahead & repeat our code base in everywhere, also what if later we would like to maybe order it in a different sequence or not re-order it at all we need to handle this conditionally & every time we have to re-alter the original data source to get the presentation right.
Pipe is an effective solution, since a pipe takes an input manipulates it & returns the update info wherein its returning something instead of manipulating the data source. The general syntax of a pipe is
input | function => left hand side of the pipe is input that we are trying to manipulate & right hand side states using which function we are going to use to manipulate it.
We can make a custom pipe which can deal with the chaos of sorting info at multiple places without repeating the logic all over.
It’s fairly a simple enough logic & we are using the utility functions provided by lodash library, which is already available in angular application internally.
Every pipe implements an interface known as PipeTransform which provides you a function to be implemented known as transform, this can be considered as the heart of pipes as this function does the entire logic of manipulating the data. The 1st argument of the pipe will be the left hand side of the pipe by default, any other arguments post that are additional arguments for customizations
What does this pipe do?
it sorts an array of objects based on any property or even used to sort a one dimensional array
- it first checks if we do have an array, a column/property on basis of which we need to sort & if we do have a sorting order in case if we do not want to sort anything.
- another check is to just verify if we have more than one object, otherwise there’s no reason to sort a single object/data.
- the orderBy function which takes 3 arguments; (list, column/property, order of sorting)
- updated : included a check to verify if it is a 1d array or multi dimensional array & perform sort.
We can use this pipe anywhere as follows
input/list | sortBy:’asc|desc’: ‘property’
Happy coding :) Cheers :)
