Back to course

Using Built-in Pipes (Date, Currency, Json)

The Complete Angular Developer: From Zero to Hero

19. Using Built-in Pipes (Date, Currency, Json)

Pipes are a way to transform data displayed in the template before it is rendered to the user. They are used in interpolation or other bindings using the pipe operator (|).

Syntax

html {{ expression | pipeName : argument1 : argument2 }}

Common Built-in Pipes

1. DatePipe

Formats a date value according to locale rules.

typescript currentDate: Date = new Date();

html

<p>Full Date: {{ currentDate | date }}</p> <!-- May 20, 2024 --> <p>Short Date: {{ currentDate | date:'shortDate' }}</p> <!-- 5/20/24 --> <p>Custom Format: {{ currentDate | date:'dd/MM/yyyy HH:mm' }}</p>

2. CurrencyPipe

Formats a number as a currency string.

typescript productPrice: number = 129.50;

html

<!-- Default currency (USD) --> <p>Price: {{ productPrice | currency }}</p> <!-- $129.50 --> <!-- Custom currency (EUR), display code, custom format --> <p>EU Price: {{ productPrice | currency:'EUR':'symbol':'1.2-2' }}</p>

3. JsonPipe

Useful for debugging. Converts a JavaScript value into a JSON string.

typescript userData = { id: 1, status: 'active' };

html

<!-- Displaying the entire object structure --> <pre>{{ userData | json }}</pre>

4. Other Pipes

  • UppercasePipe, LowercasePipe
  • SlicePipe (substring or array portion)
  • DecimalPipe (number formatting)