pipe 정의 및 개요
pipe란 출력을 바꿔주는 역할을 담당한다. 예를 들어 숫자가 1000000 이면 세자리마다 콤마를 찍어서 100,000,000 이렇게 출력한다거나 돈 단위에는 $ 를 붙인다거나 하는 원하는 출력으로 바꿔주는 역할을 한다.
여기서는 생성일, 수정일에 날짜가 현재 2018-07-15 20:49:39.0 이런 형식인데 2018-07-15 20:49 이렇게 분까지 자르기 위해서 커스텀 파이프를 구현해보고 그 다음에angular에서 제공해주는 date 파이프를 이용해서 2018-07-15 PM 20:49 이렇게 AM/PM을 붙이도록 해보겠다.
환율변환 파이프
먼저 파이프를 생성한다.
|
1 |
ng g pipe mydate |
mydate.pipe.ts를 열어보자.
transform 메서드에 두가지 파라메터가 있다. 두번째 파라메터에는 ? 옵셔널 연산자가 있으므로 필수파라메터는 아니다.
|
1 2 3 4 5 6 7 8 9 10 11 |
@Pipe({ name: 'mydate' }) export class MydatePipe implements PipeTransform { transform(value: any, args?: any): any { console.log(value, args); return null; } } |
10000원이라는 값을 달러와 엔화로 바꿔줘야할 경우가 가정해보자.
10000이라는 값을 입력으로 반드시 받아야 하므로 이 값이 첫번째 value 파라메터에 할당이 된다.
두번째 파라메터는 언제 사용되는지 생각해보자.
첫번째 값을 받아서 달러환율 1100으로 나눠주면 달러가 되지만 달러인지 엔화인지 구분해 주는 값이 필요한데 이 값을 두번째 파라메터로 넘긴다.
화면에서는 아래와 같이 표현된다.
|
1 2 3 |
<p>{{ 10000}} 원</p> <p>{{ 10000 | mydate: '$'}} $</p> <p>{{ 10000 | mydate: 'yen'}} yen</p> |
파이프에서는 아래와 같이 변경하여 보자.
첫번째 파라메터의 의미, 두번째 파라메터의 의미, 리턴값의 의미를 잘 생각해보자.
|
1 2 3 4 5 6 7 8 |
transform(value: any, args?: any): any { console.log('first:', value, 'second: ', args); if (args === '$') { return (value as number) / 1100 + args; } else if (args === 'yen') { return (value as number) / 120 + args; } } |
날짜 퍄이프
생성일인 created에 파이프를 먼저 적용하자.
|
1 |
<td>{{item.created | mydate}}</td> |
이제 분까지 짜르는 코드를 추가해보자. subString(start, end) 는 start 보다 크거나 같고 end 보다 작다라는것을 기억하자.
이제, 화면에 생성일은 분까지 보이는것을 확인할 수 있다.
|
1 2 3 4 5 6 7 |
export class MydatePipe implements PipeTransform { transform(value: any, args?: any): any { // console.log(value, args); return value.substring(0, 16); } } |
angular date 파이프
날짜 관련된 부분은 이미 angular date 파이프를 통해서 제공되고 있다. angular.io사이트에서 date pipe로 검색해보자.
수정일 부분을 다음과 같이 바꾸자. 이제 화면에 2018-07-15 PM 20:49 이렇게 보일것이다.
|
1 |
<td>{{item.updated | date : 'yyyy-MM-dd a HH:mm'}}</td> |