적당히 살기 2일차 - Angular Pipe

나름대로 적당히 살기 2일차
내일이 3일차가 아닐 수도 있음

오늘은

앵귤러에서 파이프를 적용하는 방법이다.

앵귤러에 적응하고 있을 때 데이터를 변환하여 출력하기 위해 파이프를 사용해야 했던 적이 있었다. 가이드 문서에 충분히 설명되어 있지만, html 컴포넌트와 ts 컴포넌트를 분리해서 사용할 때 ts 컴포넌트에 파이프를 직접 적용하는 방법에 대해서는 설명이 충분하지 않았던 것으로 기억된다. 그냥 못 본 것일 수도 있다. 언젠가 또 쓸 일이 있지 않을까 싶어 정리한다.

1. 파이프를 생성한다.

파이프 만드는건 공식 문서에 친절하게 설명되어 있다.

2. 서비스와 같은 방법으로 사용한다.

아래 코드처럼 component.ts에 서비스를 주입하듯이 사용하면 된다.
한 가지 차이점이 있다면 컴포넌트 데코레이터에 providers를 추가해야 한다.
모듈에 한 번만 추가해서 썼던 것도 같은데 기억이 잘 안 난다. 나중에 확인해 봐야겠다.

@Component({
	...
	providers: [Pipe]
})

constructor(
	private pipe: Pipe
) {}

v = this.pipe.transform(value, ...args);

-끝-