Angular FAQ: Top Questions

19. How to create a custom pipe in Angular?

A custom pipe transforms input data to a desired output format. Use @Pipe decorator and implement PipeTransform interface.


@Pipe({ name: 'capitalize' })
export class CapitalizePipe implements PipeTransform {
  transform(value: string): string {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

Usage:

{{ 'angular' | capitalize }}

←→