8319. Angular - PipesAngular and Pipes
Learn how to create and use pipes in Angular application.
1. Pipes
Pipes are useful at transforming data, especially when the same transformation is used throughout the application. Pipes make it easy to add these transformations into your component template.
2. Angular Pipes
Angular includes several pipes to add to your template. You can use them without importing them or add them as directives.
2.1 lowercase
Lowercase: {{ "The Quick Brown Fox Jumped Over The Lazy Dogs" | lowercase }}
Produces:
Lowercase: the quick brown fox jumped over the lazy dogs
2.2 uppercase
Uppercase: {{ "The Quick Brown Fox Jumped Over The Lazy Dogs" | uppercase }}
Produces:
Uppercase: THE QUICK BROWN FOX JUMPED OVER THE LAZY DOGS
2.3 currency
Currency: {{ 2012.55 | currency }}
Produces:
Currency: USD2,012.55
2.4 UK (gbp) pound currency
UK Pound Currency: {{ 2012.55 | currency: 'gbp':true }}
Produces:
UK Pound Currency: £2,012.55
2.5 percent
Percentage: {{ 0.5 | percent }}
Produces:
Percentage: 50%
2.6 date
Date: {{ dt | date }}
Produces:
Date: Jul 12, 2017
2.7 shortdate
Short Date: {{ dt | date:shortdate }}
Produces:
Short Date: Jul 12, 2017
2.8 Special Date Format
Special Date Format: {{ dt | date:'yMMMMEEEEd' }}
Produces:
Special Date Format: Wednesday, July 12, 2017
Predefined Date Formats
Name | Format | Example |
---|---|---|
medium | yMMMdjms | Sep 3, 2010, 12:05:08 PM |
short | yMdjm | 9/3/2010, 12:05 PM |
fullDate | yMMMMEEEEd | Friday, September 3, 2010 |
longDate | yMMMMd | September 3, 2010 |
mediumDate | yMMMd | Sep 3, 2010 |
shortDate | yMd | 9/3/2010 |
mediumTime | jms | 12:05:08 PM |
shortTime | jm | 12:05 PM |
2.9 json
{{ {customerName: 'Mark', 'address': '2312 welton av 30333'} | json }}
Produces:
{ "customerName": "Mark", "address": "2312 welton av 30333" }
3. Custom Pipes
3.1 Creating Pipe
Generate a custom pipe.
$ ng generate pipe reverse
3.2 Pipe Definition
Edit reverse.pipe.ts, ReversePipe returns the reversed text.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'reverse'
})
export class ReversePipe implements PipeTransform {
transform(value: any, args?: any): any {
let spaces = 0;
if (args){
spaces = parseInt(args);
}
let reversed = '';
for (let i=value.length-1;i>=0;i--){
reversed += value.substring(i, i+1);
reversed += Array(spaces + 1).join(' ');
}
return reversed;
}
}
- The class ReversePipe implements the
PipeTransform
interface as any pipe would.
3.3 Usage in Component
Edit app.component.ts.
import { Component } from '@angular/core';
import { ReversePipe } from './reverse.pipe';
@Component({
selector: 'app-root',
template: `
<p>My name is {{name | reverse}}
<p>My name is {{name | reverse:5}}
`,
styles: []
})
export class AppComponent {
name: string = 'Johnny';
}