Angular

Pipes

• Used to format data
• Built-in pipes: uppercase, lowercase, decimal, currency, percent

{{title | uppercase}  	

chain pipes

{{title | uppercase | lowercase}

Number pipe

• decimal pipe: separate every 3 digit by comma
• keyword for the decimal pipe is number, actual pipe class is DecimalPipe

{{price | number}}

Pass Params

{{amount | number:'2.1-3'}} 
// 2 - no of integer digits, 
// 1 - min no of digits after decimal and 
// 3- max no of digits after decimal

{{amount | currency}} //default USD
{{amount | currency:'AUD':true:'2.1-3'}} 

// AUD - currency type
// true - display currency symbol

{{releaseDate | date:'shortDate'}}

Custom Pipes

summary.pipe.ts
import {Pipe, PipeTransform} from "@angular/core";

@Pipe({
	name: 'summary'
})
export class SummaryPipe implements PipeTransform {
	/*transform(value: string, args?: any) {
		if(!value)
			return;

		return value.substr(0, 50) + "...";
	}*/
	
	transform(value: string, limit?: number ) {
		if(!value)
			return;

		let actualLimit = (limit) ? limit: 50;	
		return value.substr(0, actualLimit) + "...";
	}
}

• register pipe in the module app.module.ts

declarations: [SummaryPipe]