Difference between revisions of "AngularJS pipe"
From Wiki @ Karl Jones dot com
Karl Jones (Talk | contribs) |
Karl Jones (Talk | contribs) (→See also) |
||
| Line 32: | Line 32: | ||
Create a class which implements the <code>PipeTransform</code> interface and includes a <code>transform</code> method. Example: | Create a class which implements the <code>PipeTransform</code> interface and includes a <code>transform</code> method. Example: | ||
| + | |||
| + | <pre> | ||
| + | PENDING ... | ||
| + | </pre> | ||
| + | |||
| + | == 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: | ||
<pre> | <pre> | ||
Latest revision as of 16:36, 2 January 2017
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 ...
