Custom Pipes in Angular

Custom Pipes in Angular — a practical guide to Angular custom pipes with clear examples you can reuse in real projects.

Angular Tutorial Series (32/119). Prefer one article? Read the complete Angular tutorial.

Short description

Mark pure: false only when you must detect mutable input changes.

Custom pipe

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