PIPES IN ANGULAR

Angular has always been great at handling data.

Sometimes your data doesn't look quite the way you want. Fortunately, Angular2 has pipes that allow you transform the data.

Pipes are very useful for transforming data in angular 2.

Built-in pipes are provided for common formatting tasks, such as
formating the date,
currency formats,
displaying the response as JSON formatted,
converting uppercase to lowercase vice-versa

and if your requirement doesn't match with the built-in pipes you can create your own.

Built-in pipes:

Using the pipe operator we can apply the pipes to the transforming content.

<p>The Date pipe transformed this date {{myDate | date: 'fullDate' | upperCase}}</p>

<p>My number as a percentage {{myPercent | percent}}</p>

<p>This was originally lower case {{text | upperCase}}</p>

<p>This was originally upper case {{text | lowerCase}}</p>

<p>{{myContent | truncate: 50 | upperCase}}</p>

Custom Pipe Implementation:

 @Pipe({
 	name: 'truncate'
 })
 export class TruncatePipe implements PipeTransform {
 	tranform(value: string, chars: number): string {
  	return value.substring(0, chars);
 	}
 }

A Pipe is a class decorated with pipe metadata.

The pipe class implements the pipeTransform interface.

transform method that accepts an input value followed by optional parameters

Parameterizing a pipe:

A pipe can accept any number of optional parameters.

To add parameters to a pipe, follow the pipe name with a colon( and then the parameter value.

If a pipe can accepts multiple parameters, separate the values with a colon(

Example: slice: 1:5

Chaining pipes

There might be a chance of applying more than one pipe.

To display the birthday in uppercase, the birthday is chained to the date pipe and on to the upperCase pipe.

The chained birthday is

{{ birthday | date | uppercase}}

Pure and Impure pipes:

There are two categories of pipes:
pure and impure.

pipes are pure by default which means the value of pure proerty is true.

You can make a pipe impure by setting its pure flag to false.

@Pipe({
 name: 'truncate',
 pure: false
})

Pure Pipes:

Angular executes a pure pipe only when it detects a pure change to the input value.

A pure change in the sense a change to the primitive input value (String, Number, Boolean, Symbol)
a changed object reference (Date, Array, Function, Object)

Angular ignores calling a pure pipe when updating an input object property for such cases we would be having impure pipes.

Impure Pipe:

Angular executes an impure pipe during every component change detection cycle.

Example:

1. if something gets's added to the heroes or deleted it should get updates.

<div *ngFor="let hero of (heroes | flyingHeroesImpure)">
  {{hero.name}}
</div>

2. Look @ the example of updating of value in the select box upon selection of others.

3. AsyncPipe (> async) is the best example of the impure pipe.

The impure AsyncPipe:

The angular Asyncpipe(> async) is an interesting example of the impure pipe.

The Asyncpipe accepts a Promise or Observable as input and subscribes to the input automatically and returns the updated values.