The Magic of Angular Pipes

 the magic of angular pipes

Pipe is an object that interlinks two different points, and delivers an output in a desired manner.

Similarly in Angular, Pipes consume an input value and emits a possibly desired output (formatting the input) as a result.

I pretty much had a bad practice of using functions within the angular templates in order to fetch details or resolving values. And it took me a while to understand that using functions in the templates are bad for performance.

Then I started leveraging the power of a weapon that angular provides us to transform values.

We have many a predefined set of pipes that angular provides and it is indeed very easy to build a custom pipe to format your result set.

For any formatted output, we tend to write functions in the templates in order to compute any value.

Always remember that using functions in the templates are bad for performance. Instead use Pipes for smoother code execution.

Here I write down how to build your custom pipes easily and leverage their use.

Custom pipe to work with JSON values

Custom pipe to work with conditional values (emit different values in different scenarios)

Pipe for JSON value

Say your JSON string value is as below:

{

"destination":"London",

"destinationCode":"LON",

"source":"California",

"sourceCode": "CA"

}

Now in a case where you need to extract a value of a specific key in your template.

Custom pipe

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

@Pipe({

  name: 'travelDetails'

})

export class TravelDetailsPipe implements PipeTransform {

  transform(travelDetailsJson: string, ...args: any[]): any {

    return this.getValueFromJson(travelDetailsJson, args[0]);

  }

  // compute the json of travelDetailsJson and get the value of the key

  getValueFromJson(travelDetailsJson, key) {

    return Object.keys(travelDetailsJson).length > 0 ? JSON.parse(travelDetailsJson)[key] : '';

  }

}

Usage in the template

<span>

{{ travelDetailsJson | travelDetails: 'source' }}

</span>

In the above code your pass the JSON string and the necessary key to extract the value and that’s it you have a clean and clear way of writing custom pipes.

Bad Practice of using functions in template (AVOID DOING THIS)

<span>

{{ getSourceDetails(travelDetailsJson) }}

</span>

Where in the above code piece, the function getSourceDetails(param) computes the necessary values and returns it.

Pipe for conditional value

Say when using mat-tab component and the tab has to show different labels for users depending on the persona (roles).

Custom pipe

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

@Pipe({

  name: 'userTabName'

})

export class UserTabNamePipe implements PipeTransform {

  transform(tab: string, ...args: any[]): string {

    return this.getTabLabel(tab, args[0]);

  }

  getTabLabel(tab: string, isAdmin: boolean): string {

    let tabName = '';

      switch (tab) {

        case 'New':

          tabName = isAdmin ? 'New Requests' :  'My Requests';

          break;

        case 'InProgress':

          tabName = isAdmin ? 'Accepted' : 'In Progress';

          break;

        case 'Review':

          tabName = isAdmin ? 'Review' : 'In Review';

          break;

      }

      return tabName;

  }

}

Usage in the template

<mat-tab label="{{ 'New' | userTabName: isAdmin }}">

The parameters to the custom pipe can be increased as necessary in the template like below.

<mat-tab label="{{ 'New' | userTabName: isAdmin:isReadonly }}">

Here in the above case, the custom pipe takes an additional attribute for isReadonly (args[1]) in along with isAdmin (args[0]).

Second parameter in the transform method i.e., …args: any[] takes any number of arguments coming from the template. They needs to be used as args[0], args[1].. etc. for any computation.

The above mentioned are two of the custom pipes that you can use and transform into any other custom pipes to build and use.

Happy Coding..!!