Angular - Pipe

 

 

 

• 템플릿에서 사용하는 것으로 표현식에 개입해 결과를 수정해서 보여주는 역할
• 수많은 내장 파이프가 있음
  • {{expression | pipe}}
  • {{expression | pipe | pipe}}
  • {{expression | pipe:parameter1: parameter2}}
• 사용자 정의 파이프도 만들 수 있음
  • @pipe 데코레이터 사용

<!--내장파이프-->

<!--json 형태로 보여주기-->
<h1>{{ {'name':'leeeong' | json} }}</h1>

<!--앞에 4글자만 보여주기-->
<h1>{{ 'name':'leeeong' | slice:0:4 }}</h1>

<!--배열 첫번째만 보여주기-->
<h1>{{ ['name':'leeeong' | slice:0:1] }}</h1>

<!--대문자로 보여주기-->
<h1>{{ 'name':'leeeong' | uppercase }}</h1>

<!--소문자로 보여주기-->
<h1>{{ 'name':'leeeong' | lowercase }}</h1>

<!--그대로 보여주게 됨-->
<h1>{{ 'name':'leeeong' | uppercasecase | lowercase }}</h1>

<!--yyyy-MM-dd 형식으로 보여주기-->
<h1> {{ 1234567890 | data : 'yyyy-MM-dd' }}</h1>

<!--async를 달아놓으면 비동기로 들어오는 애들 알아서 처리해줌 -->
<h1> {{ data | async }}</h1>