[Angular2] Pipe 사용법

Pipe 는 템플릿 화면에 데이터를 보여줄때 선작업을 통해 커스터마이징 또는 변화된 데이터를 보여주고 싶을 때 사용한다.

예를 들어 회원 유무 정보가 0(비회원), 1(회원)인 경우 실제 데이터를 보여줄때 0이나 1로 보여줄수는 없을 것이다.

이 때 Pipe를 통해 0인 경우 비회원 1인 경우 회원으로 표시할 수 있다.

우선 Pipe를 사용하려면 생성을 해야한다. Node.js 콘솔에서 다음과 같이 타이핑 하여 파이프를 생성한다.

ng g pipe MemberTypePipe

생성된 소스를 다음과 같이 수정한다.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({

name: 'memberTypePipe'

})

export class MemberTypePipe implements PipeTransform {

transform(value: any, type: any): any {

switch(type){

case 'member' :

return value === '0' ? '비회원(0)' : '회원(1)';

}

}

}

임의로 작성한 내용이므로 필요에 따라 입맛에 맞게 수정하면 된다.

위와 같이 작성하면 기본준비는 끝났고 해당 Pipe를 사용하려면 다음과 같이 사용한다.

<span>{{item.member_tp | memberTypePipe:'member'}}</span>

위에 정의된 Pipe 포멧을 보면 value : any와 type : any를 파라미터로 받는데

호출할때도 그 포멧에 맞게 파라미터를 전달한다.