[Angular 4 (2)] Pipes 에 대해서

스키머(schemr)
Apr 18, 2017 · 5 min read

작성 버전

  • Angular 4.0.0
  • Angular CLI 1.0.0

Pipe 란?

Pipe 는 템플릿에서 값의 표시되는 형태를 변환해서 보여주기 위해서 사용한다.

사용법

HTML 마크업 상에서 변환하고자 하는 데이터에 다음과 같은 형태로 사용한다. (다른 Pipe를 연결해서 사용가능하고, 옵션은 콜론(:)을 연결해서 사용)

{{ value | PipeName : customOption1 :  customOption2 }}
{{ value | Pipe1 | Pipe2 }}
<p>오늘은 {{ today | date:“yyyy.MM.dd”}} 입니다.<p> 
// input) today = Sun Apr 16 2017 17:35:39 GMT+0900 (KST)
// output) 오늘은 2017.4.16 입니다
<p>{{ text | slice:0:3 | uppercase }}</p>
// input) text = 'abcdefghijk'
// output) 'ABC'

내장 Pipe

내장 Pipe

pure

Pipe는 pure와 impure(pure : false) 두개의 카테고리를 가지고 있다.

커스텀 Pipe 구현

입력값을 원하는 자리수(limit)만큼만 표시하고 뒤에 ‘…’ 을 추가하는 Pipe 를 구현하는 것을 예를 들어보겠다.

TypeScript (shorten.pipe.ts)

import { Pipe, PipeTransform } from ‘@angular/core’;@Pipe(){
name: 'shorten'
}
export class ShortenPipe implements PipeTransform {
transform(value: any, limit: number) {
if (value.length > limit) {
return value.substr(0, limit) + ' ...';
}
return value;
}
}

HTML

<p> {{ content | shorten:3 }} <p>
// input) content = '안녕하세요 반갑습니다'
// output) 안녕하세...

커스텀 Pipe (source, demo)

서비스에서 사용 목적으로 간단한 몇개의 Pipe를 구현했고, 계속 추가 예정입니다.

  • Linkify : 문자열에 포함된 링크, 이메일주소를 a tag 변환 ( | linkify )
  • CommaSeparatedNumber : 숫자를 천단위로 구분하여 콤마로 구분하여 표현 ( | commaSeparatedNumber )

Witinweb

웹을 이해하고 웹에 wit를 불어넣는 놀이터

스키머(schemr)

Written by

행복한 프론트엔드 개발자

Witinweb

Witinweb

웹을 이해하고 웹에 wit를 불어넣는 놀이터