Author avatar

Vivek Kumar

Understanding Appropriate Usage and Transforming Data with Built-In Pipes

Vivek Kumar

  • Mar 27, 2019
  • 9 Min read
  • 18 Views
  • Mar 27, 2019
  • 9 Min read
  • 18 Views
Web Development
Angular

Introduction

The objective of this guide is to get you familiar with the Angular built-in pipes and their implementation in templates.

The guide is divided into the following three categories:

  1. What are pipes?
  2. Types of built-in pipes.
  3. Implementation of each pipe with their use case.

The Prerequisites

This guide assumes that you have knowledge on HTML and the basic setup of Angular.

What are Pipes?

Pipes as the name suggests takes the input and transforms them to our desired format in a template which is more precise and relevant to the user.

Types of Built-in Pipes

There are ten types of built-in pipes in Angular as shown:

  1. LowerCasePipe
  2. UpperCasePipe
  3. TitleCasePipe
  4. DatePipe
  5. DecimalPipe
  6. JsonPipe
  7. PercentPipe
  8. SlicePipe
  9. CurrencyPipe
  10. AsyncPipe

Implementation of Each Pipe With Their Use Case

LowerCasePipe

This is one of the most used and simplest of all pipes which transforms any string text format to lower case.

Syntax

1
{{ 'LOWER' | lowercase }}

HTML

1
2
3
4
<div>
    <p> {{ 'PIPEIT' | lowercase }} </p>  
	<!--Output: pipeit-->
</div>
html

UpperCasePipe

This pipe transforms the string text data into the upper case irrespective of the input string's case.

Syntax

1
{{ 'iam_all_caps' | uppercase }}

HTML

1
2
3
4
<div>
    <p> {{ 'CAPIT' | lowercase }} </p>
	<!--Output: CAPIT-->
</div>
html

TitleCasePipe

This pipe transforms string text to title case. It capitalizes the first letter of each word and transforms the rest of the word to lower case. Words are separated with any of the following delimiters such as whitespace character, space, tab, or line-feed character.

Syntax

1
{{ 'lEts mIX IT ALL' | titlecase }}

HTML

1
2
3
4
<div>
    <p> {{ 'lEts mIX IT ALL' | titlecase }} </p>
	<!--Output: Lets Mix It All-->
</div>
html

DatePipe

This pipe requires a date value upon which it transforms the value into different date formats based on the parameter provided.

Syntax

1
{{ 'DATE' | date [ : format [ : timezone [ : locale ] ] ] }}

Here, format defines the format in which date should be displayed. For instance, short is equivalent to the format of (6/15/15, 9:03 AM).

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
	<p> {{ dateObj | date }} </p>
	<!--Output: 'Sep 25, 2019'-->
	
	<p> {{{ dateObj | date:'medium' }} </p> 
	<!--Output: 'Jan 5, 2019, 9:43:11 PM'-->
	
	<p> {{{ dateObj | date:'shortTime' }} </p>
	<!--Output: '9:43 PM'-->
	
	<p> {{{ dateObj | date:'mmss' }} </p>   
	<!--Output: '43:11'-->
</div>
html

DecimalPipe

This transforms a number to a string, formatted according to locale format which determines group sizing, separator, and decimal-point character.

Syntax

1
{{ value_expression | number [ : digitsInfo [ : locale ] ] }}

Here the parameters stand for:

digitsInfo: The decimal representation which is required in the given format:

{minIntDigits}.{minFractDigits}-{maxFractDigits}

  1. minIntDigits: refers to the minimum number of integer digits before the decimal point. Its default value is 1.
  2. minFractDigits: refers to the minimum number of digits after the decimal point. Its default value is 0.
  3. maxFractDigits: refers to the maximum number of digits after the decimal point. Its default value is 3.

locale: This code defines the locale format rules to use with en-US as the default value.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>    
    <p> 2.718281 (no formatting): {{2.718281 | number}} </p>
	<!--Output: '2.718'-->
    
    <p> 2.718281 (3.1-5): {{2.718281 | number:'3.1-5'}} </p>
	<!--Output: '002.71828'-->
    
    <p> 2.718281 (4.5-5): {{2.718281 | number:'4.5-5'}} </p>
	<!--Output: '0,002.71828'-->
    
    <p> 2.718281 (french): {{2.718281 | number:'4.5-5':'fr'}} </p>
	<!--Output: '0 002,71828'-->
  </div>
html

JSONPipe

This pipe transforms a value or an object into its JSON-format representation which is mostly used for debugging.

Syntax

1
{{ value_expression | json }}

Creating a JSON expression and saving to a variable, jsonIn

1
2
3
4
5
6
{
	"new": "old",
	"moon": {
		"star": "shines"
	}
}

HTML

1
2
3
4
5
6
7
<div>
   <p> {{ jsonIn }} </p>  
   <!--Output: [object Object]-->
   
   <p> {{ jsonIn | json }} </p>
   <!--Output: {"new":"old", "moon":{"star":"shines"}}-->
</div>
html

As you can observe from the above codeblocks, if you don't pass the JsonPipe then the expression is not rendered properly.

PercentPipe

The PercentPipe transforms a number to a percentage string, which is formatted according to locale rules that determines separator, decimal-point character, and other locale-specific configuration.

Syntax

1
{{ 'percentage' | percent [ : digitsInfo [ : locale ] ] }}

Here the parameters stand for:

digitsInfo: The decimal representation which is required in the given format:

{minIntDigits}.{minFractDigits}-{maxFractDigits}

  1. minIntDigits: refers to the minimum number of integer digits before the decimal point. Its default value is 1.
  2. minFractDigits: refers to the minimum number of digits after the decimal point. Its default value is 0.
  3. maxFractDigits: refers to the maximum number of digits after the decimal point. Its default value is 0.

locale: This code defines the locale format rules to use with en-US as the default value.

HTML

1
2
3
4
5
6
7
8
9
10
   <div>    
    <p> {{0.569 | percent}} </p>
	<!--Output: '57%'-->
     
    <p> {{1.3495 | percent:'4.3-5'}} </p>
	<!--Output: '0,134.950%'-->
     
    <p> {{1.3495  | percent:'4.3-5':'fr'}} </p>
	<!--Output: '0 134,950 %'-->
  </div>
html

SlicePipe

When this pipe is implemented, it returns array/string of sliced (subset) of the input array/string.

Syntax

1
{{ value_expression | slice : start [ : end ] }}

Here, the parameters stand for:

start

  1. If positive: returns the item at start index and all items after, in the list or string.
  2. If negative: returns the item at start index from the end and all items after, in the list or string.

end

  1. If positive: returns all items before end index of the list or string.
  2. if negative: returns all items before end index from the end of the list or string.

Typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@Component({
  selector: 'pipe-slice',
  template: `<div>
  <ul>
    <li *ngFor="let i of collection | slice:1:3">{{i}}</li> 
	<!--Output: 'b' and 'c' in list order-->
  </ul>
  
    <p> {{str}}[0:4]: '{{str | slice:0:4}}' 
	<!--Output: 'abcd'-->
	
    <p> {{str}}[4:0]: '{{str | slice:4:0}}' </p>
	<!--Output: ''-->
	
    <p> {{str}}[-4]: '{{str | slice:-4}}' </p> 
	<!--Output: 'ghij'-->
  </div>`
})

export class PipeSlice {
  str: string = 'abcdefghij';
  collection: string[] = ['a', 'b', 'c', 'd'];
}
typescript

CurrencyPipe

The CurrencyPipe transforms the currency string according to locale mentioned in the pipe. This pipe gives you the freedom of displaying different currency formats for the global users of your application.

Syntax

1
{{ currency_value | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

Here, the parameters stand for:

display: It is the format for the currency indicator and can be one of the following:

  1. code: Shows the code (such as USD).
  2. symbol (default): Displays the symbol (such as $).
  3. symbol-narrow: Displays the narrow symbol for locales that have two symbols for their currency.
  4. String: Displays the custom string value, instead of a code or a symbol.

digitsInfo: The decimal representation which is required in the given format:

{minIntDigits}.{minFractDigits}-{maxFractDigits}

  1. minIntDigits: refers to the minimum number of integer digits before the decimal point. Its default value is 1.
  2. minFractDigits: refers to the minimum number of digits after the decimal point. Its default value is 2.
  3. maxFractDigits: refers to the maximum number of digits after the decimal point. Its default value is 2.

locale: This code defines the locale format rules to use with en-US as the default value.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
    <p> {{ 2456.67 | currency:'CAD' }} </p>
    <!--Output: $2456.67-->
	
    <p> {{ 2456.67| currency:'CAD':'code' }} </p>
	<!--Output: CAD2456.67-->

    <p> {{ 2456.67| currency:'CAD':'symbol' }} </p>
	<!--Output: CA$2456.67-->
    
    <p> {{ 2456.67| currency:'CAD':'symbol-narrow'}} </p>
	<!--Output: $2456.67-->
</div>
html

AsyncPipe

This pipe accepts an observable or a promise as an input and renders the transformed output of an observable or promise without having to call then or subscribe.

NOTE: String format is not supported by AsyncPipe.

Syntax

1
{{ object-expression | async }} 

HTML

1
2
3
4
5
<div>
    <code>promise|async</code>: 
    <button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button>
    <span>Wait for it... {{ greeting | async }}</span>
</div>
html

Conclusion

In this guide, you have learned the use case of each built-in pipe available in Angular. These can be used in your application to save more time and make an optimized code base without much logic fuss for small operations like these Pipes serve.

0