Angular | Pipes

Angular

Pipes
pg. 1
 Angular | Pipes

Introduction
Pipes are small fragments of code that transform data values so they can be
displayed to the user in templates. Pipes allow transformation logic to be defined in
self-contained classes so that it can be applied consistently throughout an
application.
Table 1. Putting Pipes in Context

Question Answer
What are they? Pipes are classes that are used to prepare data for display to the
user.
Why are they useful? Pipes allow preparation logic to be defined in a single class that
can be used throughout an application, ensuing that data is
presented consistently.
How are they used? The @Pipe decorator is applied to a class and used to specify a
name by which the pipe can be used in a template.
Are there any pitfalls or Pipes should be simple and focused on preparing data. It can be
limitations? tempting to let the functionality creep into areas that are the
responsibility of other building blocks, such as directives or
components.
Are there any alternatives? You can implement data preparation code in components or
directives, but that makes it harder to reuse in other parts of
the application.
Pipes are functions that data is passed through prior to being rendered into the
page. Somewhat similar to how components have the OnInit lifecycle hook to handle
logic before the component renders, pipes do the same thing for bindings.

Component
gets data

Template finds Template finds

bindings without pipe bindings with pipe Figure 1: Data is passed through a pipe before
being rendered in a template binding.

Data is transformed
by pipe

Result is rendered
in view
pg. 2
 Angular | Pipes

Types of Pipes
There are fundamentally two types of pipes: pure and impure. Pure pipes
maintain no state information, and impure pipes maintain state. Pure and impure
pipes are also rendered differently as you can see in figure-2.

Change
Detection runs

Encounters Encounters
pure pipe impure pipe

No Has Input Yes Figure 2: how pure and impure pipes are
changed? handled by Angular

Run transform Run transform

Do nothing method method

Update view Update view

A pure pipe is only run if the input value passed into the pipe has changed,
making it more efficient because it won’t run very often. On the other hand, an
impure pipe will execute on every change detection run, because an impure pipe has
state that might have changed, and that would render a different output regardless
of whether the input has changed.
Syntax for applying a pipe:

pg. 3
 Angular | Pipes

Built-in pipes
Table 2. Putting Pipes in Context

Name Description
number This pipe performs location-sensitive formatting of number
values.
currency This pipe performs location-sensitive formatting of currency
amounts.
percent This pipe performs location-sensitive formatting of percentage
values.
date This pipe performs location-sensitive formatting of dates.
uppercase This pipe transforms all the characters in a string to uppercase.
lowercase This pipe transforms all the characters in a string to lowercase.
json This pipe transforms an object into a JSON string.
slice This pipe selects items from an array or characters from a
string.
async This pipe subscribes to an observable or a promise and displays
the most recent value it produces.
The async pipe subscribes to an Observable or Promise and
returns the latest value it has emitted. And automatically
unsubscribed when component get destroyed.

pg. 4
 Angular | Pipes

Steps to creating a custom pipe

1. Create a class that implements PipeTransform interface.
2. Override transform(value:any, …args:any):any function from
PipeTransform.
3. Decorate the class with @Pipe decorator and decorate defines two
properties, which are used to configure pipes, as described in below table
Table 3. The @Pipe Decorator Properties

Name Description
name This property specifies the name by which the pipe is applied in
templates.
pure When true, this pipe is reevaluated only when its input value or
its arguments are changed. This is the default value. See the
“Creating Impure Pipes” section for details.

shorten.pipe.ts

pg. 5
 Angular | Pipes

Register a custom pipe

Pipes are registered using the declarations property of the Angular module

Applying a custom pipe

Once it is registered then ready to use like using built-in pipes in data binding
expressions.
<strong> {{ server.name| shorten:10:”..” }} </strong>

Output:

pg. 6