Admin

03-22-2026, 06:31 AM #1

Pipes are a powerful way to transform data in Angular templates without modifying the underlying data.

Built-in pipes:
- DatePipe: Format dates ({{ date | date:'fullDate' }})
- CurrencyPipe: Format currency values
- DecimalPipe: Format numbers with decimal places
- PercentPipe: Display percentages
- AsyncPipe: Subscribe to Observables in templates
- JsonPipe: Debug objects in templates
- SlicePipe: Slice arrays or strings

Creating custom pipes:
@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number): string {
    return value.length > limit ? value.substring(0, limit) + '...' : value;
  }
}

Pure vs Impure pipes:
- Pure pipes: Only re-evaluate when input reference changes (default)
- Impure pipes: Re-evaluate on every change detection cycle
- Always prefer pure pipes for performance

What custom pipes have you created for your projects?

indian

03-25-2026, 01:31 PM #2

Pipes are such an elegant way to handle data transformation in templates. The AsyncPipe is particularly valuable as it automatically manages Observable subscriptions and prevents memory leaks. Creating custom pipes for common transformations like truncating text or formatting phone numbers keeps templates clean and promotes reusability across the entire application.