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:

How to create and use filters in AngularJS

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "testproj";
}

1
2
3
4
5
6
7
8


<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
    <br />
    Uppercase example: {{ title | uppercase }}
  </h1>
</div>
<router-outlet></router-outlet>

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

Lowercasepipe

1
2
3
4
5
6
7
8


<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
    <br />
    Lowercase example: {{ title | lowercase }}
  </h1>
</div>
<router-outlet></router-outlet>

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

Currencypipe

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
    <br />
    Currency example: {{ amount | currency: "USD" }}
    <!--without $ sign-->
    <br />
    {{ amount | currency: "USD":true }}
    <!--with $ sign-->
  </h1>
</div>
<router-outlet></router-outlet>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "testproj";
  amount = 7598;
}

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.

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

Datepipe

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "testproj";
  currentDate = new Date();
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
    <br />
    Date example: {{ currentDate | date }}
    <!--Dec 8, 2018-->
    <br />
    {{ currentDate | date:'M/d/y'}}<br />
    <!--12/8/2018-->
    {{ currentDate | date:'shortTime'}}
    <!--7:56 PM-->
  </h1>
</div>
<router-outlet></router-outlet>

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

Jsonpipe

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "testproj";
  addressJson = {
    name: "ZeptoBook",
    city: "Jersey City",
    state: "New Jersey",
  };
}

1
2
3
4
5
6
7
8


<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
    <br />
    Json example: {{ addressJson | json }}
  </h1>
</div>
<router-outlet></router-outlet>

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

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.

Output will be:

84.486

2. Using Format 3.2-5

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

In template file

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

Output will be:

000.50

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "testproj";
  num = 84.4856248;
  num1 = 0.5;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
    <br />
    Decimal example: {{ num | number }}
    <!--Default Format-->
    <br />
    {{ num | number: '3.2-5' }}
    <!--Using 3.2-5 template--><br />
    {{ num1 | number: '3.2-5' }}
    <!--Using 3.2-5 template-->
  </h1>
</div>
<router-outlet></router-outlet>

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

Output will be:

150%

2. Using Format 2.2-5

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

In template file

Output will be:

150.00%

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "testproj";
  numPercent = 1.5;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
    <br />
    Percent example: {{ numPercent | percent }}
    <!--Default Format--><br />
    {{ numPercent | percent: '2.2-5' }}
    <!--Using 2.2-5 Format-->
  </h1>
</div>
<router-outlet></router-outlet>

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.

Output will be:

3,4,5,6

Another example of slice.

Output will be:

3,4

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "testproj";
  numArr: number[] = [1, 2, 3, 4, 5, 6];
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
    <br />
    Slice example:
    <p>numArr slice (2): {{ numArr | slice: 2 }}</p>
    <p>numArr slice (2,4): {{ numArr | slice: 2:4 }}</p>
  </h1>
</div>
<router-outlet></router-outlet>

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.

Reference

https://angular.io/guide/pipes

Pipes in Angular

Angular Built-In Pipes

Uppercasepipe

Lowercasepipe

Currencypipe

Datepipe

Jsonpipe

Decimalpipe

1. Using Default Format

2. Using Format 3.2-5

3. Using Format 3.2-5

Percentpipe

1. Using Default Format

2. Using Format 2.2-5

SlicePipe

Summary

Reference

Further Reading

See Also