Angular Pipes
Adam Keyser
Pipes
- Transform data only for display
- Format data: currency, dates, numbers
- Declared in html
Example Built-in Pipes:
- currency
- date
- json
- number
- uppercase
- lowercase
Examples
let person.firstName = 'fred';
-> 'FRED'
Using a Pipe
- Within data bindings:
<td class="text-right"></td>
<td class="date"></td>
<td class="date"></td>
Date Pipe
- Supports logical formats
- medium MMM d, y h:mm:s a
- short M/d/yy h:mm a
- fullDateEEE, MMM d, y
- longDate MMM d, y
- mediumDate MMM d, y
- shortDate M/d/yy
- mediumTime h:mm:ss a
- shortTime h:mm a
JSON Filter
- Good debugging tool
- Converts the filtered value into JSON
<div></div>
Parameters
- Pipes can take 0.. N arguments
- Seperate them all with a
:
Chaining Pipes
-
Use the to chain filters together
Filtering Collections
- Used with directives that operate on arrays (ng-repeat)
- Example: slice
- Constrains the array to only n items
<tr ng-repeat="p in products | slice:0:20">
Creating Your Own Pipe
- Metadata
@Pipe
defines pipe name for template expressions - Implement the
PipeTransform
interfacetranform
method takes initial value plus any arguments
- Return a function that accepts a value and returns the modified result
#Custom Pipe Example
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'labelCase'
})
export class LabelCasePipe implements PipeTransform {
transform(firstName: string, lastName?: string): string {
return LabelCasePipe.nameFormat(firstName) + (lastName ? ", " + LabelCasePipe.nameFormat(lastName) : "");
}
static nameFormat(value: string) : string {
let upper = value.toUpperCase();
let lower = value.toLowerCase();
return upper[0] + lower.substr(1);
}
}
#Pipe change detection
- Pipe events don’t react to every dom event
- For example - mutating arrays
- Can be resolved by replacing the array with a new array
#Pure vs impure Pipes
- Pure by default
- Change detection only on primitive values or new objects
- Impure
- Change detection on every component change detection cycle
- Can cause performance issues
#Impure Pipes
@Pipe({
name: 'myExpensivePipe',
pure: false
})
#Async Pipes
- Used in conjuction with Observables, Promises
- When piped - subscribes to observable and updates for every value emitted
- Can be used for time interval user input - like debounce for typeahead or searches
#Testing pipes
- Can test output in component tests by using query selectors
- Custom pipes can be tested in isolation by testing the transform method
it('transforms "abc" to "Abc"', () => {
let pipe = new LabelCasePipe();
expect(pipe.transform('NAME')).toBe('Name');
});
Summary
- Angular is strongly opinionated on where data transformation for display should happen
- Do it in pipes
- Pipes can accept arguments and use other pipes
- Pipes can operate on single values and collections