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

Full Date: {{ currentDate | date }}

Short Date: {{ currentDate | date:'shortDate' }}

Custom Format: {{ currentDate | date:'dd/MM/yyyy HH:mm' }}

2. CurrencyPipe

Formats a number as a currency string.

typescript productPrice: number = 129.50;

html

Price: {{ productPrice | currency }}

EU Price: {{ productPrice | currency:'EUR':'symbol':'1.2-2' }}

3. JsonPipe

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

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

html

{{ userData | json }}

4. Other Pipes

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