Pipes & Custom Pipe

Code

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

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

// Usage in template:
// {{ "Hello Angular world" | truncate:5 }}   -> "Hello..."
// {{ price | currency:"USD" }}
// {{ today | date:"short" }}
// {{ obj | json }}

Explanation

Pipes transform template display values via the | operator. Angular ships built-in pipes like date, currency, uppercase, and json. Custom pipes implement PipeTransform and register a name for use in templates with optional arguments.

More Angular Snippets