Example
Use case scenario: A table view consists of different columns with different data format that needs to be transformed with different pipes.
table.component.ts
...
import { DYNAMIC_PIPES } from '../pipes/dynamic.pipe.ts';
@Component({
...
pipes: [DYNAMIC_PIPES]
})
export class TableComponent {
...
// pipes to be used for each column
table.pipes = [ null, null, null, 'humanizeDate', 'statusFromBoolean' ],
table.header = [ 'id', 'title', 'url', 'created', 'status' ],
table.rows = [
[ 1, 'Home', 'home', '2016-08-27T17:48:32', true ],
[ 2, 'About Us', 'about', '2016-08-28T08:42:09', true ],
[ 4, 'Contact Us', 'contact', '2016-08-28T13:28:18', false ],
...
]
...
}
dynamic.pipe.ts
import {
Pipe,
PipeTransform
} from '@angular/core';
// Library used to humanize a date in this example
import * as moment from 'moment';
@Pipe({name: 'dynamic'})
export class DynamicPipe implements PipeTransform {
transform(value:string, modifier:string) {
if (!modifier) return value;
// Evaluate pipe string
return eval('this.' + modifier + '(\'' + value + '\')')
}
// Returns 'enabled' or 'disabled' based on input value
statusFromBoolean(value:string):string {
switch (value) {
case 'true':
case '1':
return 'enabled';
default:
return 'disabled';
}
}
// Returns a human friendly time format e.g: '14 minutes ago', 'yesterday'
humanizeDate(value:string):string {
// Humanize if date difference is within a week from now else returns 'December 20, 2016' format
if (moment().diff(moment(value), 'days') < 8) return moment(value).fromNow();
return moment(value).format('MMMM Do YYYY');
}
}
export const DYNAMIC_PIPES = [DynamicPipe];
table.component.html
<table>
<thead>
<td *ngFor="let head of data.header">{{ head }}</td>
</thead>
<tr *ngFor="let row of table.rows; let i = index">
<td *ngFor="let column of row">{{ column | dynamic:table.pipes[i] }}</td>
</tr>
</table>
Result
| ID | Page Title | Page URL | Created | Status | --------------------------------------------------------------------- | 1 | Home | home | 4 minutes ago | Enabled | | 2 | About Us | about | Yesterday | Enabled | | 4 | Contact Us | contact | Yesterday | Disabled | ---------------------------------------------------------------------
