Angular Pipe(|)

# Angular Pipe란?

| 기호는 Angular Template(xxx.component.html) 상에서 특수한 목적을 위해 사용된다. Angular.js 상에서는 Filter 기능이라고 생각하면 된다.

원래 있는 값이 아니라, 보여지는 값만 변경하기 위해 Pipe를 사용한다. 대표적인 Pipe 객체는 date, json 등이 있다.

더 이쁘게 보여주기 위해, 원래 있는 값을 변경할 필요가 없다.

템플릿에서 보이는 데이터를 변환해주는 역할을 한다.(역할은 필터랑 같겠지?)

(ex) {{ express | pipeName:paramValue}}

{{ today }}                        //컴포넌트 내 today라는 값을 일반적으로 toString해서 반환

{{ today | date(pipe명칭) }}  // today라는 값을 date pipe로 formating해서 보여준다.

{{ today | date:"yy/mm/dd"}}

{{ today | date | uppercase(pipe명칭) }}

 

# 예제

(xxx.component.ts class 中)

today : Date = new Date();

 

(xxx.component.html 中)

<div>{{ today }}</div> //Wed Jun 14, 2017 09:00...

<div>{{ today | date }}</div> //Jun 14, 2017

<div>{{ today | date:"M월 d일" }} </div> //6월 14일

<div>{{ todos }} //Object Object

<dif>{{ todos | json}} //{{"done":"false","text":"운동하기"}}