Pipes Angular: A Comprehensive Guide to Angular’s Built-in Pipes

In Angular, pipes are a way to transform data within templates. They allow developers to display data in a format that’s easier for users to understand, without altering the underlying data model. Angular provides a wide range of built-in pipes that cover common data transformations like formatting dates, numbers, strings, and more.

In this article, we’ll cover the entire catalog of Angular’s built-in pipes, explaining when and how to use each one, along with practical examples.

What Are Pipes in Angular?

Pipes are simple functions that take input data, process it, and return the transformed data in a desired format. They are used within Angular templates using the pipe symbol (|), which allows for clean and concise syntax.

Basic syntax:

htmlCopy code{{ value | pipeName:arg1:arg2 }}

• value is the data to be transformed.
• pipeName is the name of the pipe to apply.
• arg1, arg2, etc., are optional arguments passed to the pipe for additional transformation.

Why Use Built-in Pipes?

• Ease of Formatting: They simplify formatting dates, numbers, currencies, and more directly in templates.
• Cleaner Templates: They help maintain clean and readable templates by moving the formatting logic out of the component.
• Performance: Pipes are optimized for performance, as Angular automatically tracks and updates transformed data when needed.

Catalog of Angular’s Built-in Pipes

Angular provides a rich set of built-in pipes for handling strings, numbers, dates, JSON data, and more. Here is a comprehensive list of these pipes, along with detailed descriptions and examples of how to use each one.

1. DatePipe

• Purpose: Formats dates according to the specified format.
• Usage: {{ dateValue | date:format }}
• Arguments:
  • format (optional): Specifies the format of the date (e.g., 'short', 'medium', 'fullDate', 'yyyy-MM-dd').
• Example:htmlCopy code{{ today | date:'fullDate' }} <!-- Outputs: Monday, October 17, 2024 --> {{ today | date:'yyyy-MM-dd' }} <!-- Outputs: 2024-10-17 -->
• When to use: For displaying dates in different formats, such as short dates, long dates, or custom formats.

2. UpperCasePipe

• Purpose: Transforms text to uppercase.
• Usage: {{ text | uppercase }}
• Example:htmlCopy code{{ 'hello' | uppercase }} <!-- Outputs: HELLO -->
• When to use: For converting strings to uppercase, such as making headings or labels more prominent.

3. LowerCasePipe

• Purpose: Transforms text to lowercase.
• Usage: {{ text | lowercase }}
• Example:htmlCopy code{{ 'HELLO' | lowercase }} <!-- Outputs: hello -->
• When to use: For converting strings to lowercase, which can be useful for standardizing user input or displaying text in a uniform format.

4. TitleCasePipe

• Purpose: Converts the first letter of each word to uppercase.
• Usage: {{ text | titlecase }}
• Example:htmlCopy code{{ 'hello world' | titlecase }} <!-- Outputs: Hello World -->
• When to use: For displaying titles, headings, or any text that should follow title casing conventions.

5. CurrencyPipe

• Purpose: Formats numbers as currency strings.
• Usage: {{ amount | currency:code:symbolDisplay:digitsInfo:locale }}
• Arguments:
  • code (optional): The currency code (e.g., 'USD', 'EUR').
  • symbolDisplay (optional): Whether to display the symbol or code (e.g., 'symbol', 'code').
  • digitsInfo (optional): Decimal digits format (e.g., '1.2-2').
  • locale (optional): Specifies the locale.
• Example:htmlCopy code{{ 1234.56 | currency:'USD':'symbol':'1.2-2' }} <!-- Outputs: $1,234.56 --> {{ 1234.56 | currency:'EUR':'code' }} <!-- Outputs: EUR1,234.56 -->
• When to use: For displaying monetary values, such as prices, balances, or transaction amounts.

6. DecimalPipe

• Purpose: Formats numbers with decimal points.
• Usage: {{ numberValue | number:digitsInfo:locale }}
• Arguments:
  • digitsInfo (optional): Format for decimals (e.g., '1.0-2').
  • locale (optional): Specifies the locale.
• Example:htmlCopy code{{ 1234.567 | number:'1.1-2' }} <!-- Outputs: 1,234.57 --> {{ 1234 | number:'3.0-0' }} <!-- Outputs: 1,234 -->
• When to use: For displaying numbers with specific decimal precision, such as percentages, measurements, or statistical data.

7. PercentPipe

• Purpose: Converts numbers to percentage strings.
• Usage: {{ value | percent:digitsInfo:locale }}
• Arguments:
  • digitsInfo (optional): Format for decimals (e.g., '1.0-2').
  • locale (optional): Specifies the locale.
• Example:htmlCopy code{{ 0.75 | percent:'1.0-0' }} <!-- Outputs: 75% --> {{ 0.1234 | percent:'1.1-2' }} <!-- Outputs: 12.34% -->
• When to use: For displaying ratios, proportions, or statistics as percentages.

8. SlicePipe

• Purpose: Extracts a substring or subarray from a string or array.
• Usage: {{ value | slice:start:end }}
• Arguments:
  • start: Starting index.
  • end (optional): Ending index (not included).
• Example:htmlCopy code{{ 'Angular Pipes' | slice:0:7 }} <!-- Outputs: Angular --> {{ [1, 2, 3, 4, 5] | slice:1:4 }} <!-- Outputs: [2, 3, 4] -->
• When to use: For extracting specific parts of strings or arrays, such as showing a preview of a string or list.

9. JsonPipe

• Purpose: Converts objects into JSON strings for display.
• Usage: {{ object | json }}
• Example:htmlCopy code{{ { name: 'Angular', version: 18 } | json }} <!-- Outputs: {"name":"Angular","version":18} -->
• When to use: For debugging or displaying JSON data in templates.

10. KeyValuePipe

• Purpose: Converts an object into an array of key-value pairs.
• Usage: {{ object | keyvalue }}
• Example:htmlCopy code<div *ngFor="let item of { name: 'Angular', version: 18 } | keyvalue"> {{ item.key }}: {{ item.value }} </div> <!-- Outputs: name: Angular version: 18 -->
• When to use: For iterating over objects or displaying key-value pairs in templates.

11. I18nPluralPipe

• Purpose: Displays different strings based on numeric values for localization.
• Usage: {{ value | i18nPlural:pluralMapping:locale }}
• Arguments:
  • pluralMapping: Object mapping numbers to strings.
  • locale (optional): Specifies the locale.
• Example:htmlCopy code{{ 1 | i18nPlural:{ '=1': 'One item', 'other': '# items' } }} <!-- Outputs: One item --> {{ 5 | i18nPlural:{ '=1': 'One item', 'other': '# items' } }} <!-- Outputs: 5 items -->
• When to use: For displaying different messages based on numbers, useful in localized UIs.

12. I18nSelectPipe

• Purpose: Maps values to strings for internationalization.
• Usage: {{ value | i18nSelect:selectMapping }}
• Arguments:
  • selectMapping: Object mapping values to strings.
• Example:htmlCopy code{{ gender | i18nSelect:{ 'male': 'Mr.', 'female': 'Ms.', 'other': 'Mx.' } }} <!-- Outputs: Mr., Ms., or Mx. based on gender -->
• When to use: For displaying gender-based titles or other conditional strings in a localized UI.

Conclusion

Angular’s built-in pipes offer a powerful, easy-to-use way to transform and display data within templates. From formatting dates, numbers, and currencies to transforming text and iterating over objects, Angular’s built-in pipes cover a wide range of use cases that make data presentation clearer and more intuitive.

By using these pipes, you can:

• Simplify Template Code: Pipes help keep your templates clean by moving transformation logic out of the component.
• Enhance Readability: They allow you to express complex formatting directly in the template, making it easier to understand the displayed data.
• Improve Reusability: Built-in pipes can be reused across components, ensuring consistent formatting throughout the application.

When to Use Built-in Pipes

1. Data Presentation: Use pipes for transforming how data is presented to users without modifying the underlying model.
2. Localization: Pipes like i18nPlural and i18nSelect are essential for localized applications, helping to display different strings based on user language or preferences.
3. Simplified Logic: Use pipes to avoid writing complex formatting logic in the component’s TypeScript code, keeping the transformation in the template for simplicity.

By mastering these built-in pipes, Angular developers can build applications that are not only efficient but also present data in a user-friendly and consistent manner. Keep this catalog handy as a reference to make the most out of Angular’s built-in pipes in your projects!