[Angular] Custom Pipe

✅ 나만의 파이프

• 보통 client app단위에서 사용하니,
• apps/client/app/pipes 디렉토리를 만들어 파일을 생성하쟈

🔸 생성

// tel.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'tel',
  standalone: true,
})
export class TelPipe implements PipeTransform {
  transform(value?: string): string {
    if (!value) return '';
    const firstPart = value.slice(0, 3);
    const secondPart = value.slice(3, 7);
    const thirdPart = value.slice(7, 11);
    return firstPart + '-' + secondPart + '-' + thirdPart;
  }
}

🔸 사용

// in typescript file
import { TelPipe } from 'apps/client/src/app/pipes/tel.pipe';

@Component({
	...,
    imports: [TelPipe],
    ...
})

// in HTML file
<div>
	{{ member().tel | tel }}
</div>