AngularJS pipe

From Wiki @ Karl Jones dot com
Jump to: navigation, search

In AngularJS, a pipe takes some data, transforms it, and outputs the transformed data.

AngularJS has built-in pipes, and supports custom pipes.

Description

Use pipes in AngularJS templates with interpolation. Example:

<p>User created on {{created_at | date }}</p>

To indicate a parameter in a pipe, use a colon. Example:

<p>User created on {{created_at | date:"MM/dd/yy" }}</p>

Pipes can be chained together. Example:

<p>User created on {{created_at | date | uppercase }}</p>

Custom pipes

To create custom pipes, import the Pipe decorator and PipeTransform interface. Example:

import { Pipe, PipeTransform } from 'angular2/core';

Create a class which implements the PipeTransform interface and includes a transform method. Example:

PENDING ...

Asynchronous pipe

Binds an observable (or a promise) to an AngularJS template.

Skips process of manually subscribing to async methods in a component, and then setting those values for the template to bind to.

Example: Component attribute:

PENDING ...

See also

External links