사용자 지정 파이프 만들기

사용자 지정 파이프가 필요한 이유

@Pipe 데코레이터

import { Pipe } from "@angular/core";

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe {}

PipeTransform 구현하기

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string): string {
    return value + "!";
  }
}

transform 메서드

transform(value: string): string {
  return value.trim();
}

파이프 사용하기

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [ExclaimPipe],
  template: "<p>{{ 'hi' | exclaim }}</p>"
})
export class DemoComponent {}
// renders: hi!

인수 받기

@Pipe({ name: "repeat", standalone: true })
export class RepeatPipe implements PipeTransform {
  transform(value: string, times: number): string {
    return value.repeat(times);
  }
}
// {{ "ab" | repeat:3 }} -> ababab

인수 기본값

transform(value: string, times: number = 2): string {
  return value.repeat(times);
}
// {{ "ab" | repeat }} -> abab

Null 및 Undefined 처리하기

transform(value: string | null): string {
  if (value == null) return "";
  return value.toUpperCase();
}

Truncate 파이프 예제

@Pipe({ name: "truncate", standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 20): string {
    if (!value) return "";
    return value.length > limit
      ? value.slice(0, limit) + "..."
      : value;
  }
}

반환 값의 타입 지정하기

@Pipe({ name: "double", standalone: true })
export class DoublePipe implements PipeTransform {
  transform(value: number): number {
    return value * 2;
  }
}

모듈에 등록하기(NgModule)

@NgModule({
  declarations: [TruncatePipe],
  exports: [TruncatePipe]
})
export class SharedModule {}

빠른 확인

복습