# Pipes

## What are Pipes?

Pipes are used in Angular to format data, e.g., numbers, dates, currency

## Angular Built-In Pipes

* uppercase
* lowercase
* number
* date
* currency

Built in pipes are imported by default

## Using Pipes

```
{{ data-expression | pipe-name:param1:param2 }}

// example
birthday: Date = new Date(1985, 5, 1);
{{ birthday | date:"M-dd-yyyy" }}
// outputs 5/01/1985
```

{% hint style="info" %}
Pipes can be chained together and are processed from left to right:

`birthday = new Date(1985, 5, 1);`

`{{ birthday | date:"MMMM-dd-yyyy" | uppercase }}`

// output: MAY-1-1985
{% endhint %}

## Using Pipes in Code

{% embed url="<https://stackblitz.com/edit/angular-fundamentals-ad2019-13?file=src%2Fapp%2Fusers%2Fusers.component.ts&view=editor>" %}

## Internationalized Pipes

```
// set for entire application
providers: [{provide: LOCALE_ID, useValue: 'es-mx'}]

// or

// for a given item
{{ birthday | date:"MM-dd-yyyy":"":"es-mx" }}
```

Pipes like date, number, currency are effected by locale if it is set.

## Date Pipe

Date pipes allow custom date formatting including timezone and locale specific formatting.

```
{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

```

* 'short': equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).&#x20;
* 'medium': equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).&#x20;
* 'long': equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1).&#x20;
* 'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).&#x20;
* 'shortDate': equivalent to 'M/d/yy' (6/15/15).
* 'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015).&#x20;
* 'longDate': equivalent to 'MMMM d, y' (June 15, 2015).&#x20;
* 'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).&#x20;
* 'shortTime': equivalent to 'h:mm a' (9:03 AM).&#x20;
* 'mediumTime': equivalent to 'h:mm:ss a' (9:03:01 AM).
* 'longTime': equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1).&#x20;
* 'fullTime': equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

## Decimal Pipe

Used to convert numbers to a decimal format and allows the developer to set the formatting.  When combined with locale it will apply I18N.&#x20;

```
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

{{ 123.456 | number:"2.2-2" }}
> 123.46

{{ 123.454 | number:"4.1-2" }}
> 0,123.45
```

{% hint style="info" %}
Numbers are rounded, not truncated
{% endhint %}

## Currency Pipe

The currency pipe allows the developer to format numbers into currency formats in a variety of ways.  It also uses the decimal pipe's number formatting.

{% embed url="<https://stackblitz.com/edit/angular-fundamentals-ad2019-13dot2?file=src%2Fapp%2Fcurrency%2Fcurrency.component.html&view=editor>" %}

## Creating a Custom Pipe

{% embed url="<https://stackblitz.com/edit/angular-fundamentals-ad2019-13?file=src%2Fapp%2Fellipsis.pipe.ts&view=editor>" %}

## Filter and OrderBy Pipes

Another use for pipes is filtering or ordering data before being handled by a structural directive like \*ngFor.    The transform function of the pipe can perform the sorting or filtering before returning the data.

{% embed url="<https://stackblitz.com/edit/angular-fundamentals-ad2019-13dot8?file=src%2Fapp%2Fincomplete.pipe.ts&view=editor>" %}

## Pure and Impure Pipes

There are two types of pipes, pure and impure.  Pipes are pure by default and all the pipe examples so far have been pure.  You can make a pipe impure by adding `{pure: false}` to the pipe decorator.

Pure pipes only execute when there is a change to a simple type (string, boolean, number, etc) or change an object reference (array, function, object, date).  Angular will ignore changes to composite objects like these as it is much quicker to check a reference change than to check every property of an object.

{% hint style="danger" %}
Impure functions take a lot more processing power, so choose wisely. &#x20;
{% endhint %}

{% hint style="info" %}
Prefer pure pipes over impure pipes.
{% endhint %}

## Summary

* What are pipes?
* What built-in pipes exist and how to use them
* How to create a custom pipe
* How pipes can be used for filtering and sorting
* Pure vs Impure Pipes


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://briebug.gitbook.io/angular-fundamentals/pipes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.