// Tutorial //

Built-in Pipes in Angular

Published on November 1, 2016
Default avatar

By Alligator.io

Built-in Pipes in Angular

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Pipes in Angular give you an easy way to transform data directly in your templates. You can create your own custom pipes, and you can also use any of the following ones, which are part of the CommonModule and available right out of the box:

This post covers Angular 2 and up

Async

The Async pipe automatically subscribes to an Observable or a Promise and returns the emitted values as they come in:

<ul>
  <li *ngFor="let item of data | async">
    {{ item.name }}
  </li>
</ul>

Currency

The Currency pipe allows to format numbers in different currencies:

{{ price | currency:'CAD' }}
{{ price | currency:'USD':true }}
{{ price | currency:'EUR':false:3.2-2 }}
  • The first argument is a string with the local currency code.
  • The second possible argument is a boolean to show the that will show either the currency symbol, or the currency code. The default is false and shows the currency code.
  • The third possible is a string in the format of the decimal pipe to format the number.

Date

Format date values with the Date pipe:

{{ someDate | date:'medium' }}
{{ someDate | date:'fullDate' }}
{{ someDate | date:'yy' }}
{{ someDate | date:'Hm' }}

You can use a number of symbols to define a custom format, or you can also use a number of predefined keywords. The available keywords are the following: ‘medium’, ‘short’, ‘fullDate’, ‘longDate’, ‘mediumDate’, ‘shortDate’, ‘mediumTime’ and ‘shortTime’.

See the official API reference for a list of symbols.

Decimal

The Decimal pipe formats decimal values:

{{ decimalValue | number:'4.3-5' }}

In the above example (‘4.3-5’), 4 is for the minimum number of integer digits, 3 is for the minimum number of fraction digits and 5 is for the maximum number of fraction digits.

Json

The Json pipe is useful for debugging and displays an object as a Json string. It uses JSON.stringify behind the scenes:

{{ someObject | json }}

LowerCase & UpperCase

Covert text to either lower case or upper case with the respective pipe:

{{ user.name | uppercase }}
{{ user.name | lowercase }}

Percent

The Percent pipe transforms a number into it’s percentage value:

{{ decimalValue | percent }}
{{ decimalValue | percent:'3.2-3' }}

The optional argument is a string in the Decimal pipe format.

Slice

Create a subset list or string with the Slice pipe:

{{ someText | slice:3:6 }}
<ul>
  <li *ngFor="let item of someList | slice:2">
    {{ item }}
  </li>
</ul>

The arguments are the start index and the end index. The end index can be omitted, and the resulting list or string will contain everything from the start index to the end.

👉 There are also 2 more built-in pipes that are currently at the experimental stage: I18nPlural and I18nSelect.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

card icon
Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Sign up
card icon
Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We’d like to help.

Learn more
card icon
Become a contributor

You get paid; we donate to tech nonprofits.

Learn more
Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow – whether you’re running one virtual machine or ten thousand.

Learn more ->
DigitalOcean Cloud Control Panel
Get started for free

Enter your email to get $200 in credit for your first 60 days with DigitalOcean.

New accounts only. By submitting your email you agree to our Privacy Policy.

© 2023 DigitalOcean, LLC.