Pipes

Pipes are a simple way to transform values in an Angular template. There are some built in pipes, but you can also build your own pipes. A pipe takes in a value or values and then returns a value.

• DatePipe – Formats a date value according to locale rules.
• UpperCasePipe – Transforms text to all upper case.
• LowerCasePipe – Transforms text to all lower case
• CurrencyPipe – Transforms a number to a currency string, formatted according to locale rules.
• DecimalPipe – Transforms a number into a string with a decimal point, formatted according to locale rules.
• PercentPipe – Transforms a number to a percentage string, formatted according to locale rules.

Currency

Default USD money sign:

{{user.balance | currency}}

Other currency sign:

{{user.balance | currency: "GBP">"code"}}

{{user.balance | currency: "GBP">"symbol"}}

Date

{{ user.registered | date: 'yyyy.MM.dd hh:mm' }}

{{ user.registered | date }}

{{ user.registered | date: "mm/dd/yyyy" }}

{{ user.registered | date: "yyyy" }}

{{ user.registered | date: "shortDate" }}

{{ user.registered | date: "longDate" }}

{{ user.registered | date: "fullDate" }}

{{ user.registered | date: "shortTime" }}

{{ user.registered | date: "longTime" }}

Decimal

5.00

{{ 5 | number: 1.2 }}

5.0000

{{ 5 | number: 1.4 }}

05.0000

{{ 5 | number: 2.4 }}

Percent

100%

{{1 | percent}}

50%

{{.5 | percent}}

Deactivating Angular processing with NgNonBindable

To prevent expression evaluation in the browser, add ngNonBindable to the host element. ngNonBindable deactivates interpolation, directives, and binding in templates.

In the following example, the expression {{ 1 + 1 }} renders just as it does in your code editor, and does not display 2.

If you apply ngNonBindable to a parent element, Angular disables interpolation and binding of any sort, such as property binding or event binding, for the element’s children.