Like the other applications, all the angular application also follows the common way of processing the data and producing them into an output to the user. But streaming and transforming the output data format according to the user specification might give you lot of challenges. For instance, every user might require the data to be produced in a different format based on their needs. And that is where we plotted, because we know very well that all these process cannot be handled in back end and we should handle it only through the front end so it’s too hard for us to proceed all these process through the front end. Here’s where the want warm concept called Angular pipes comes in like an Armour to relive us from all this risky plots.
The concept of Angular 2 pipes will greatly help us to transform the data into the required format based on the user specification so let ‘s get into the pipes below,

1. Pure Pipes

2. Impure Pipes

Pure Pipes:

Pure pipe will be executed only when the”change detection cycle” is used on the input (May be converting into string, integer, Boolean) or when we try to change the object reference (Like converting into array or hash ). Comparatively, object reference would be faster than the change detection cycle. Also Angular will declare us when the pure pipe is to be executed.
For example, if you want to automatically assign the CSS properties to the different inputs of the loop then you can go ahead with this pure pipes.

Impure Pipes:

Impure pipe can also be executed for change detection cycle or for changing the object reference as same as like Pure Pipes. But here the major difference is, that this impure pipe will be executed for every Javascripts events like mouse move, key stroke which might affect the performance of an application. However, it will allow you to perform the continuous execution on pipes but the disadvantage of using this pipe is, that it will be difficult for the users when they try to perform continuous execution.

Related: Angular Reuse Strategy – Learn To Create Reusable Component In Angular

Built-In Pipes:

Angular provides the built in pipes which we can use it in our the application by default and all these built-in pipes are pure in angular. Some of the example for built-in pipes are,
AsyncPipe – It is used to perform the asynchronous operation for the observable and the subscribe, unsubscribe operation can be automatically done by AsyncPipe.
UpperCasePipe – It is used for converting the value to the Uppercase
LowerCasePipe – It is used for converting the value to the Lowercase
Likewise there are more number of built-in pipes are available, incase if you want to use it then refer this documentation,
https://angular.io/api?type=pipe
One Pipe will accept multiple parameters and you can pass the parameter in a following way,
After the pipename just put “ : “ and mention the parameter you need to pass also note the below sample,

[mfData]="accountGoals | searchdata : searchText : status"

 
For example,
On the same way you can send more number of parameters and even you can chain multiple pipes for particular object. While you do this, make sure that the one pipe should not disturb or affect the other pipe if so then the last pipe of the chain will be executed.
Use the below code to chain the pipes,

{{today | date | uppercase | seachdate}}

Tips: Learn To Create Observables In Angular 4

No Filter Pipe Or OrderBy Pipe:

In Earlier Angular versions you might have used filterBy and orderBy pipes which is ideally used for sorting the array and to filter the specific value from the array of value. Somehow these two pipes are not user friendly, because every time it checks for the key stroke or the mouse event which will reduce the performance of an application. Luckily, now these two pipes are not available in Angular 2 and instead Angular allows us to write custom pipes so we can write the custom pipes according to the logic we like to use. So let’s see how to create the custom pipes.

How To Create Custom Pipes In Angular 2 :

To construct a custom pipes, follow these simple procedure mentioned below,
=> First we need to give the pipe name with @pipe decorator
=> then the Pipe class needs to implement Pipe transform class which accept inputs followed by the optional parameters. To transform this output you need to include transform method
=> there will be one additional parameter for transform method where we can add the data type of the value and we should pass pass the data type through the parameter as“Exponent”
=> You must include the pipe in the declaration array of app module.
One the main advantage of using these pipes are that the functionality need not to be appended every time because it’s already appended on the pipes. Since in most of the cases, these pipes are used for styling purpose so this might also result in changing the style properties for DOM.

Reuse Pipes In Multiple Components:

It’s is not necessary that we should use the pipe in a single component because we can reuse the pipe in multiple components. For that, you just need to share the common property between different components. Only the object and the parameter value will be changed from one component to the other component but the functionality we wrote on the pipe will be the same.
For example, you could see the below code that how i have reused the pipes in multiple components,

<div class="box-body">
<p class="text-center" *ngIf="noData"> No Assessments Assigned </p>
<table class="table table-striped table-bordered display dataTable" *ngIf=!noData [mfData]="accountGoals | searchdata : searchText : status" mfSortBy="assessment_duration" #mf="mfDataTable" >
<thead>
</thead>
</table>
</p>
</div>
<div class="box-body">
<p class="text-center" *ngIf="noData"> No Assessments Assigned </p>
<table class="table" *ngIf=!noData [mfData]="accountMetrics | searchdata : metricsText : metric_status" mfSortBy="assessment_duration" #mf="mfDataTable" >
<thead>
</thead>
</table>
</p>
</div>

Hope you enjoyed reading this, follow us on social media to read more blogs like this, do subscribe to get all the latest updates straight to your inbox. If you are looking for angular developers ? Hire Angular developer from Agira Technologies to build best web-apps at affordable rates. Our dedicated Angular developers are well-versed with all the updates and ensure top-notch web applications development to meet your business requirements. For any queries reach us via info@agiratech.com