Pipes in Angular

Pipes in Angular

In Angular application, sometimes, we needs to show formatted data to the users, instead of raw data. Like date data, it would be great, if we can show date like December 10, 2018 instead of 12/10/2018 or 12-18-2018.

In earlier version of Angular <2.0, pipes were knows as Filters. In later Angular version >2+, these filters are known as Pipes to format the data.

To read more about Filters in AngularJS (<v2), click the below link:

The pipe (|) symbol is used for formatting the data.  There are some built-in pipes in Angular. These are mentioned here.

Angular Built-In Pipes

  • Uppercasepipe
  • Lowercasepipe
  • Currencypipe
  • Datepipe
  • Jsonpipe
  • Decimalpipe
  • Percentpipe
  • Slicepipe

Let’s go through details of these pipes one by one.

Uppercasepipe

The following line of code will format the title in uppercase.

{{ title | uppercase }}

Lowercasepipe

The following line of code will format the title in lowercase.

{{ title | lowercase }}

Currencypipe

Here, in our app.component.ts file, we have amount property, and we are format this in USD currency using these two lines of codes.

{{ amount | currency: “USD” }} <!–without $ sign–>

{{ amount | currency: “USD”:true }} <!–with $ sign–>

Note: If you set USD to true, it will show $ sign along with amount.

Datepipe

Here, we showed current date in different format using the parameters.

{{ currentDate | date }} <!–Dec 8, 2018–>

{{ currentDate | date:’M/d/y’}}<br/> <!–12/8/2018–>

{{ currentDate | date:’shortTime’}} <!–7:56 PM–>

Jsonpipe

Here, we have created a json object addressJson, and apply the Json pipe to render on the browser.

{{ addressJson | json }}

Decimalpipe

Decimalpipe is used to format a number as a decimal number as per locale use. The syntax for writing this is:

number_expression | number[:digitInfo]

Let’s see each part in detail:

number_expression: this is an angular expression that will give output a number.

number: number is a pipe keyword that will be used with pipe operator.

digitInfo: defines number format.

Let’s dive into the details of digitInfo syntax. The syntax is below:

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

Below is the description of each part.

minIntegarDigits: minimum number of integer digits. Default is 1.

minFractionDigits: minimum number of fraction digits. Default is 0.

maxFractionDigits: maximum number of fraction digits. Default is 3.

Let’s have a look at few examples.

1. Using Default Format

{1}.{0}-{3}

Where

{1}: minIntegerDigit, {0}: minFractionDigit, {3}: maxFractionDigit

Let’s declare a property num, and assign this value.

num = 84.4856248;

& in template file.

{{ num | number }} <!–Default Format–>

Output will be:

84.486

2. Using Format 3.2-5

{3}: minIntegerDigit, {2}: minFractionDigit, {5}: maxFractionDigit

In template file

{{ num | number: ‘3.2-5’ }} <!–Using 3.2-5 template–>

Output will be:

084.48562

3. Using Format 3.2-5

Declare another property num1, and assign the value.

num1 = 0.5;

In template file

{{ num1 | number: ‘3.2-5’ }} <!–Using 3.2-5 template–>

Output will be:

000.50

Percentpipe

Percentpipe format a number as a percent as per locale rules. The syntax for writing this is:

number_expression | percent[:digitInfo]

Let’s see each part in detail:

number_expression: this is an angular expression that will give output a number.

percent: percent is a pipe keyword that will be used with pipe operator and convert number into percent.

digitInfo: defines percent format.

Let’s dive into the details of digitInfo syntax. The syntax is below:

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

Below is the description of each part.

minIntegarDigits: minimum number of integer digits. Default is 1.

minFractionDigits: minimum number of fraction digits. Default is 0.

maxFractionDigits: maximum number of fraction digits. Default is 3.

Let’s have a look at few examples.

1. Using Default Format

{1}.{0}-{3}

Where

{1}: minIntegerDigit, {0}: minFractionDigit, {3}: maxFractionDigit

Let’s declare a property numPercent, and assign this value.

numPercent = 1.5;

In template file

{{ numPercent | percent }} <!–Default Format–>

Output will be:

150%

2. Using Format 2.2-5

{2}: minIntegerDigit, {2}: minFractionDigit, {5}: maxFractionDigit

In template file

{{ numPercent | percent: ‘2.2-5’ }} <!–Using 2.2-5 Format–>

Output will be:

150.00%

SlicePipe

Slice pipe is used to slice some part of an array or string. The syntax of SlicePipe is below:

string_or_array | slice: start[:end]

Let’s see details of above syntax.

string_or_array: any string or array where we will apply Slice pipe.

slice: a slice pipe

start: the starting index of the subset to return

end: the ending index of the subset to return

Let’s have a look at few examples. Create an number array numArr in component class.

numArr: number[] = [1, 2, 3, 4, 5, 6];

Let’s slice this array with different parameters.

{{ numArr | slice: 2 }}

Output will be:

3,4,5,6

Another example of slice.

{{ numArr | slice: 2:4 }}

Output will be:

3,4

Summary

So, in this blog, we learned about different types of pipes used in Angular. We learned about their syntax, how to use them with different code snippets. Using pipes in angular, we can format data in a user friendly manner.

Further Reading

Adesh

Hi, I am Adesh. I am a senior software engineer having more than 12 years of software development experience. I am a full stack developer and interested in writing the technical post on programming. I am currently working in New York City area.

This Post Has 5 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu