+- Anna University Plus (https://annauniversityplus.com)
+-- Forum: Front-End JavaScript (https://annauniversityplus.com/Forum-front-end-javascript)
+--- Forum: Angular (https://annauniversityplus.com/Forum-angular)
+--- Thread: Angular Pipes: Built-in and Custom Pipes for Data Transformation (/angular-pipes-built-in-and-custom-pipes-for-data-transformation)
Angular Pipes: Built-in and Custom Pipes for Data Transformation - Admin - 03-22-2026
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?
RE: Angular Pipes: Built-in and Custom Pipes for Data Transformation - indian - 03-25-2026
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.