IT 회사에서 즐겁게 지내기!

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

String이 바인딩이 되었다면 다른 것도 가능하겠죠??

오늘은 Property 바인딩에 대해서 보겠습니다.

html 태그의 속성과 ts 클래스의 변수를 연결합니다.

역시 말보다는 코드를 보는 게 더 쉽겠죠?

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Component({
    selector: 'app-budget',
    templateUrl: './budget.component.html',
    styleUrls: [ './budget.component.css' ]
})
export class BudgetComponent implements OnInit{
    budget: number = 0;
    ngOnInit(){
        let secondTick = Observable.timer(1000,1000);
        secondTick.subscribe((tick)=>{ this.budget += 1000; });
    }
}

지난 번 ts 코드의 template부분을 변경합니다.

template을 templateUrl 로 수정하구요.

지난번 지우지 않고 그대로 둔 html 파일 경로를 설정합니다.

<h3>My Budget: ₩{{budget}}</h3>
<input type="text" [value]="budget">
<button>Add Income</button>

budget.component.html에 Property Binding을 적용해보죠.

위의 코드에서 중요한 부분은 [value] 부분입니다.

대괄호 [ ]는 원래 html 코드에는 없는 내용이죠.

input 태그의 value 속성에 ts 코드의 값을 맵핑할 수 있습니다.

budget값은 ts 코드에 정의된 변수 이름입니다.

<h3> 태그에 있는 값과 동일하죠.

결과화면은 아래와 같습니다.

property binding 결과화면

Input의 값이 budget값과 동일하게 바뀌는 것을 볼 수 있습니다.

물론 아래와 같이 String Interpolation을 이용해도 동일합니다.

<input type="text" value="{{budget}}">

다음에는 Event Binding을 통해 Add Income 버튼을 동작시켜보죠.

소스주소: https://github.com/jsrho1023/account-book