pipe, custom pipe 사용하기

 

 

0. pipe 가 뭔가요

     - 제가 설명하고 싶은건 custom pipe 여러 다른 내용은 상대적으로 간략하게 요약하였습니다.

     - 클래스를 파이프로 표시하고 구성 메타데이터를 제공하는 데코레이터입니다.

     - https://angular.dev/api/core/Pipe

     - 쉽게 설명하면 파이프 설정에 따라 html 에 띄울 변수가 변환됨

변수를 데이터바인딩하여 " ❘ " 입력 후 원하는 파이프 선택

date 파이프 예시
html	<h2>{{test}} </h2>	<h2>{{test | date : "MMM dd, yyyy" }} </h2>
wed	Tue Feb 18 2025 13:59:56 GMT+0900 (한국 표준시)	Feb 18, 2025

 

---

 

1. 파이프 종류

     -  angular 에서 기본적으로 제공하는 내장 파이프와 사용자 임의의 커스텀 파이프가 존재

 

---

 

1-1. 내장 파이프

         - 다음과 같은 내장 파이프가 존재합니다.  

         - https://angular.dev/guide/templates/pipes    

---

1-2. custom pipe

     - 내장 파이프에 원하는 기능이 없을 경우 커스텀 파이프를 사용합시다.

       물론 하나하나 slice 해서 이어붙여도 되겠지만 이쪽이 훨씬 편하잖아요!

 

 

     1). 파이프 클래스 만들기

ng generate pipe 커스텀파이프이름	module 의 NgModule - decleartions 에 자동으로 import 됨 (생략가능)
혹은 새파일 생성 후 파이프 클래스 선언	module 의 NgModule - decleartions 에 import
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({   name: 'customPipe' //파이프 이름 }) export class CustomPipePipe implements PipeTransform {   /**    * 함수 이름 변경 X    * @param value 데이터바인딩 된 변수    * @param start 시작index    * @param end  끝index    * @return 파이프가 적용된 반환값    */   transform(value: unknown, start?: number, end?: number): unknown {     return " *** "; //테스트 반환값, 사용자가 원하는대로 변경   } }

 

          1-1). @Pipe 의 파라미터에 standalone 적용 시 

               - ngModule 의 declaration 가 아닌 import 에 import

               - standalone  디폴트값은 false 이며, appModule 에만 적용 가능하므로

                  모듈을 여러개 사용할 경우 해당 옵션을 사용하면 여러 컴포넌트에서 재사용 가능하다.  

 

 

      2). 클래스 안 transform 함수를 원하는 대로 수정

           - 본인이 원하는 기능에 맞춰 내부 함수를 수정하시면 됩니다.

 

 

      3). 파이프 적용

           - 사용하려는 파이프를 데이터바인딩 한 변수에 적용합니다.

customPipe 파이프 예시
html	<h2>{{test | customPipe}}
wed	***

 

 

행복앵ㅇ귤러되세용