[Angular] 동적 파이프(Dynamic Pipe)

파이프를 변수에 넣어 동적으로 적용시키고자 할 때 사용

 

dynamic-pipe.ts

import { Injector, Pipe, PipeTransform } from '@angular/core';
import { NumberZeroPipe } from './number-zero.pipe';
import { StringZeroPipe } from './string-zero.pipe';

@Pipe({
    name: 'dynamicPipe'
})
export class DynamicPipe implements PipeTransform {

    public constructor(
        private injector: Injector
    ) {
    }

    transform(value: any, pipeToken: any, pipeArgs: any[]): any {
        // 사용할 pipe 선언
        const MAP = {
            'number0': NumberZeroPipe,
            'string0': StringZeroPipe,
        }

        if (pipeToken && MAP.hasOwnProperty(pipeToken)) {
            var pipeClass = MAP[pipeToken];
            var pipe = this.injector.get(pipeClass);
            if (Array.isArray(pipeArgs)) {
                return pipe.transform(value, ...pipeArgs);
            } else {
                return pipe.transform(value, pipeArgs);
            }
        }
        else {
            return value;
        }
    }
}

HTML

<ul>
    <li *ngFor="let item of list">
        {{ item.data | dynamicPipe: item.pipe : item.pipeOptions }}
    </li>
</ul>

TS

this.list = [
	{ data: 1000000.12345, pipe: 'number0', pipeOptions: 'limit: 2' },
	{ data: 2000000.12345, pipe: 'number0', pipeOptions: 'limit: 2' },
];

출처

http:// https://stackoverflow.com/questions/36564976/dynamic-pipe-in-angular-2/46910713#46910713