Angular Pipes

Pipe는 매우 간단하지만 효과적인 기능입니다.

Data를 사용자에게 더 잘 보여주는 것이에요.

사실 프로젝트에서 슬쩍 사용하고 있었습니다.

어떤 것이냐구요?

바로 금액을 표시하던 부분!

Angular Pipes 활용 예시

위에 보면 원표시(￦)가 있죠?

단위를 텍스트로 일일이 표시하기 귀찮습니다.

날짜는 어떻구요.

11월 12일, 2018년 이럼 좋지만.

보통 Date 형식의 Data는 어떻죠?

Mon Sep 12 2018 00:00:00 GMT+0900

못생겼습니다.

이것을 보기 좋게 바꾸는 것도 일이죠.

이럴 때 Angular의 Pipe를 이용합니다.

먼저 사용방법은 아래와 같습니다.

<div class="budget-balance">
  <div class="balance-total">
    <span class="balance-title">Balance</span>
    <span class="balance-amount">
      {{balance | currency:'KRW':'symbol'}}</span>
  </div>
  <div class="division-line"></div>
  <div class="budget-total">
    <span class="budget-title">Today's Budget</span>
    <span class="budget-amount">
      {{budget | currency:'KRW':'symbol'}}</span>
  </div>
  <div class="division-line"></div>
</div>

String Interpolation에 pipe를 추가합니다.

{{ 데이터 | Pipe }}

String Interpolation은 초반에 다루었죠?

Angular 데이터 바인딩 I (String Interpolation)

중요한 부분은 Pipe 입니다.

저는 Currency Pipe를 이용했습니다.

파이프이름:설정:설정... 과 같은 구조입니다.

Pipe마다 설정이 다르니 문서를 참조해야합니다.

기본제공되는 파이프는 아래와 같습니다.

DatePipe

예: {{ birthday | date:"MM/dd/yy" }}

UpperCasePipe

예: {{ value | uppercase }} 

LowerCasePipe

예: {{ value | lowercase }} 

CurrencyPipe

예: {{ money | currency:'KRW':'symbol'}} 

PercentPipe

예: {{ 0.259 | percent }}

물론 스스로 pipe를 만들 수도 있습니다.

자주 쓰는건 만들어둬도 좋겠죠?

전 아직 기본만 쓰면 충분하더라구요. ^^

정보출처:

https://angular.io/guide/pipes