앵귤러 템플릿 - Pipes

파이프는 템플릿에서 사용가능한 function들을 말합니다.

사용방법

사용은 아래와 같이 변화를 주고자 하는 값의 우측에 ' | ' 기호를 두고 사용하고자 하는 파이프를 호출하여 사용합니다.

<p>{{ value | pipeName }}</p>

앵귤러 자체 파이프들

1. date

Date 파이프를 원시타입 변수의 값이 바뀌거나 참조된 객체가 바뀔 때마다 작동합니다.

<p>{{ value | date : format : timezone : locale }}</p>

<!-- pipe.component.html -->

<p>{{ value | date : 'short' }}</p>
<p>{{ value | date : 'medium' }}</p>
<p>{{ value | date : 'long' }}</p>
<p>{{ value | date : 'full' }}</p>
<p>{{ value | date : 'MM-dd-yyyy' }}</p>
<p>{{ value | date : 'M/d/yy, h:mm a' }}</p>
<p>{{ value | date : 'shortDate' }}</p>
<p>{{ value | date : 'longDate' }}</p>
<p>{{ value | date : 'shortTime' }}</p>
<p>{{ value | date : 'longTime' }}</p>

// pipe.component.ts

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

@Component({
  selector: 'app-pipe',
  templateUrl: './pipe.component.html',
  styleUrls: ['./pipe.component.css']
})
export class PipeComponent implements OnInit {
  value:Date = new Date()
  constructor() { }

  ngOnInit(): void {
  }
}

---

date 파이프 리스트

'short'	'M/d/yy, h:mm a'	6/15/15, 9:03 AM
'medium'	'MMM d, y, h:mm:ss a'	Jun 15, 2015, 9:03:01 AM
'long'	'MMMM d, y, h:mm:ss a z'	June 15, 2015 at 9:03:01 AM GMT+1
'full'	'EEEE, MMMM d, y, h:mm:ss a zzzz'	Monday, June 15, 2015 at 9:03:01 AM GMT+01:00
'shortDate'	'M/d/yy'	6/15/15
'mediumDate'	'MMM d, y'	Jun 15, 2015
'longDate'	'MMMM d, y'	June 15, 2015
'fullDate'	'EEEE, MMMM d, y'	Monday, June 15, 2015
'shortTime'	'h:mm a'	9:03 AM
'mediumTime'	'h:mm:ss a'	9:03:01 AM
'longTime'	'h:mm:ss a z'	9:03:01 AM GMT+1
'fullTime'	'h:mm:ss a zzzz'	9:03:01 AM GMT+01:00

https://angular.io/api/common/DatePipe

Angular

---

2. uppdercase

지정된 문자를 대문자로 만들어 주는 기능입니다.

<p>{{ 'value' | uppercase }}</p>

3. lowercase

지정된 문자를 소문자로 만들어 주는 기능입니다.

<p>{{ value | lowercase }}</p>

 

4. titlecase

지정된 문단의 시작 단어를 대문자로 만들어 주는 기능입니다.

<p>{{ 'value' | titlecase }}</p>

5. currency

<p>{{ value | currency : currencyCode : displayFormat : digits : locale }}</p>

<p>{{ 3 | currency : 'USD' : 'code' }}</p>
<p>{{ 3 | currency : 'CAD' : 'code' }}</p>
<p>{{ 3 | currency : 'USD' }}</p>
<p>{{ 3 | currency : 'CAD' }}</p>
<p>{{ 3 | currency : 'USD' : 'symbol' }}</p>
<p>{{ 3 | currency : 'CAD' : 'symbol' : '5.2-5' }}</p>
<p>{{ 3 | currency : 'USD' : 'symbol-narrow' : '6.1-5' }}</p>
<p>{{ 3 | currency : 'CAD' : 'symbol-narrow' : '4.3-5' }}</p>

6. decimal

<p>{{ value | number : displayFormat : locale }}</p>

<p>{{ 3 | number : '4.3-5' }}</p>
<p>{{ 3.5 | number : '4.0-0' }}</p>
<p>{{ 3.4 | number : '4.0-0' }}</p>

7. percent

<p>{{ value | percent : digitInfo : locale }}</p>

<p>{{ 4 | percent }}</p>

소스코드

https://github.com/jin-co/web-mobile/tree/master/Angular/cheat-sheet/pipe

GitHub - jin-co/web-mobile

---

참고

https://angular.io/guide/pipes-overview

Angular

https://angular.io/api/common/DecimalPipe

Angular