파이프 연결 및 매개 변수화

파이프에 인수 전달하기

단일 인수

<p>{{ today | date:"fullDate" }}</p>
<!-- Saturday, May 30, 2026 -->

여러 인수

<p>{{ text | slice:0:10 }}</p>
<!-- first 10 characters -->

동적 인수

<p>{{ price | currency:currencyCode }}</p>

// component
currencyCode = "GBP";
price = 99;

파이프 연결이란?

<p>{{ name | slice:0:5 | uppercase }}</p>
<!-- slices first, then uppercases -->

연결 예제

<p>{{ today | date:"fullDate" | uppercase }}</p>
<!-- SATURDAY, MAY 30, 2026 -->

순서가 중요합니다

<!-- uppercase then slice -->
{{ "angular" | uppercase | slice:0:3 }}
<!-- ANG -->

<!-- slice then uppercase -->
{{ "angular" | slice:0:3 | uppercase }}
<!-- ANG -->

인수와 연결 함께 사용하기

<p>{{ amount | number:"1.2-2" | slice:0:6 }}</p>

통화 파이프 연결하기

<p>{{ price | currency:"USD" }}</p>
<!-- $1,234.56 -->

가독성 팁

// instead of a long template chain,
// compute in the component:
get displayName(): string {
  return this.name.slice(0, 5).toUpperCase();
}

파이프 주변의 공백

<p>{{ value | date : "short" }}</p>
<!-- equivalent to value|date:"short" -->

빠른 확인

복습