Lesson 24 / 30

Custom Pipes

Write your own transformation logic as a reusable pipe.

@Pipe & transform

A custom pipe implements PipeTransform; the transform method takes the input value plus any arguments and returns the transformed result.

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

@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;
  }
}

Using it

Import the pipe into the standalone component, then use it with | just like a built-in.

<p>{{ article.summary | truncate:80 }}</p>