파이프 출력 형식 지정하기

파이프는 출력 형식을 인자로 전달해서 다양하게 활용할 수 있습니다.

참고: 자세한 내용은 파이프로 데이터 형식 지정하기 심화 가이드 문서를 참고하세요.

이번 튜토리얼에서는 파이프 인자 사용 방법을 알아봅시다.

파이프에 인자를 전달하려면 파이프 뒤에 : 문법을 사용하면 됩니다. 예제 코드를 봅시다:

      
template: `{{ date | date:'medium' }}`;
    

그러면 Jun 15, 2015, 9:43:11 PM 와 같은 결과값이 표시됩니다.

이제 직접 해봅시다:

1. DecimalPipe로 숫자 형식 지정하기

   app.ts 파일의 템플릿에 decimal 파이프를 적용하는데, 이 떄 인자를 함께 전달해 봅시다.

         
   template: `    ...    <li>Number with "decimal" {{ num | number:"3.2-2" }}</li>`
       

   참고: 이게 무슨 형식일까요? DecimalPipe는 digitsInfo 인자를 받는데, 이 인자는 {정수의 최소 자리수}.{소수의 최소 자리수}.{소수의 최대 자리수} 형식입니다.

2. DatePipe으로 날짜 형식 지정하기

   이제, date 파이프를 사용해 봅시다.

         
   template: `    ...    <li>Date with "date" {{ birthday | date: 'medium' }}</li>`
       

   좀 더 재미있게, date 파이프에 다른 인자를 지정해 보세요. 자세한 내용은 Angular 문서에서 확인할 수 있습니다.

3. CurrencyPipe으로 통화 형식 지정하기

   마지막으로 템플릿에 currency 파이프를 사용해 봅시다.

         
   template: `    ...    <li>Currency with "currency" {{ cost | currency }}</li>`
       

   currency 파이프에 인자를 지정해 보세요. 자세한 내용은 Angular 문서에서 확인할 수 있습니다.

파이프를 잘 활용하셨습니다. 지금까지 많은 것들을 경험해 보셨네요.

Angular가 제공하는 파이프는 이 튜토리얼에서 다룬 것보다 훨씬 다양합니다. 파이프 목록은 Angular 문서를 참고하세요.

기본 제공 파이프만으로 해결이 되지 않는 경우라면 커스텀 파이프를 만들어서 활용하면 됩니다. 이 내용은 다음 튜토리얼에서 알아봅시다.