Introduction To Angular Pipes

This article explains how to use Angular built-in pipes like uppercase, lowercase, titlecase, date, percent, number, currency, slice, and JSON pipe, and how to create your customized pipes as well.

If you would like to read my previous article on Angular, please visit the below links.

• Top 10 Most Popular Charts in Angular With .NET Core API
• How to Always Use Angular's Latest Version With Visual Studio 2017
• Exploring Angular Fundamental with Visual Studio 2017
• Creating Angular 5 App with Visual Studio 2017 - An Easy Way

The following topics have been covered in this article.

1. Pipe Syntax
2. Passing parameter for a Pipe
3. Using multiple pipes (chaining pipes)
4. Case Conversion Pipes
   
   
   1. UpperCasePipe
   2. LowerCasePipe
   3. TitleCasePipe
      
      
5. DatePipe
6. PercentPipe
7. DecimalPipe
8. CurrencyPipe
9. SlicePipe
10. JsonPipe
11. Creating Custom pipes
    
    
    1. Alternate case pipe
    2. Opinion pipe

Angular Pipes can be used to transform data to desired output. Angular provides a lot of inbuilt pipes, apart from that we can create our custom pipes as well very quickly.

If you are coming from an AngularJS background, then you must remember that in AngularJS we use filters which can be used for Formatting, Sorting, and Filtering. However, in Angular, we use Pipe only for formatting. Following is a tabular representation for the same.

	AngularJS Filter	Angular Pipe
Formatting	YES	YES
Sorting	YES	NO
Filtering	YES	NO

So, you can say that in Angular, Pipe has only one responsibility, i.e. formatting of the data.

Pipe Syntax

The syntax for using pipe in Angular is straightforward. Just use data or expression and pipe name separated with a pipe ‘|’ symbol.

 data | pipeName

Passing parameter for a pipe

We can pass any number of parameters to the pipe using a colon (:)

 data | pipeName: parameter 1 : parameter 2 : parameter 3 …. : parameter n

Using multiple pipes (chaining pipes)

We can use multiple pipes with the same data at the same. This also referred to as chaining pipes

data | pipe 1 | pipe 2 | pipe 3 | ……… pipe n

OR

data | pipe 1 : parameter 1 : parameter 2 : parameter 3 …. : parameter n  | pipe 2 : parameter 1 : parameter 2 : parameter 3 …. : parameter n | pipe 3 : parameter 1 : parameter 2 : parameter 3 …. : parameter n | ……… pipe n : parameter 1 : parameter 2 : parameter 3 …. : parameter n

Let’s have a look at the built-in pipes and then we will go through the custom pipe as well.

Case Conversion Pipes

Built-in Angular Pipes for Case Conversion

• UpperCasePipe: UpperCasePipe is used to transforms text to uppercase.

Example
{{name | uppercase}}

• LowerCasePipe: UpperCasePipe is used to transforms text to lowercase.

Example
{{name | lowercase}}

• TitleCasePipe: TitleCasePipe is used to transforms text to title case.

Example
{{name | titlecase}}

To understand it in a better way let’s create an Angular app. I am going to create an Angular App using Visual Studio 2017 as IDE. You can choose any IDE.

Add a component “AngularPipesDemoComponent”, I will be using the same component for all pipe demos.

component.ts

public name: string = 'bANketEShVar NarAYan';

component.html 

<div class="row" style="margin-bottom:5px">
    <div class="col-md-6 col-md-offset-3"><span style="font-size:24px; font-weight:bold"> Case Conversion Example</span></div>
</div>

<table class="table table-inverse" style="font-size:20px; font-weight:400">
    <thead class="bg-primary">
        <tr>
            <th>Original Text</th>
            <th>Lower Case</th>
            <th>Upper Case</th>
            <th>Title Case</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-success">
            <td>{{name}}</td>
            <td>{{name | lowercase}}</td>
            <td>{{name | uppercase}}</td>
            <td>{{name | titlecase}}</td>
        </tr>
    </tbody>
</table>

Output

DatePipe

DatePipe can be used to convert a date to desired date or time format based on locale and time zones.

Syntax

date_expression | date[:format[:timezone[:locale]]]

*.component.ts
currentdate = Date.now(); 

*.component.html 

<h3>Date Formats Sample</h3>
<p>Today is :{{currentdate | date}}</p>

<p>Today is : {{currentdate | date:'fullDate'}}</p>
<p>Current time is : {{currentdate | date:'shortTime'}}</p>
<p>Current Date is: {{currentdate | date:'dd-MMMM-yyyy'}}</p>

Output

PercentPipe

PercentPipe is used to display data in percent. i.e 0.51 is displayed as 51 percent.

Syntax

number_expression | percent[:{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} [:locale]]

where minIntegerDigits, minFractionDigits and maxFractionDigits have default values 1,0 and 3 respectively. 

component.ts

mynumber: number = 0.51003003039303033030;
mynumber2: number = 0.05;

component.html

<div class="row" style="margin-bottom:5px">
<div class="col-md-6 col-md-offset-3"><span style="font-size:24px; font-weight:bold">PercentPipe (percent) Example</span></div>
</div>
<table class="table table-inverse" style="font-size:20px; font-weight:400">
    <thead class="bg-primary">
        <tr>
            <th>#</th>
            <th>Original Data</th>
            <th>Format 1</th>
            <th>Format 2</th>
            <th>Format 3</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-success">
            <th scope="row">1</th>
            <td>{{mynumber}}</td>
            <td>{{ mynumber|percent}}</td>
            <td>{{ mynumber|percent:'2.4-8'}}</td>
            <td>{{ mynumber|percent:'5.4-8':'in'}}</td>
        </tr>
        <tr class="bg-warning">
            <th scope="row">2</th>
            <td>{{mynumber2}}</td>
            <td>{{ mynumber2|percent}}</td>
            <td>{{ mynumber2|percent:'2.4-8'}}</td>
            <td>{{ mynumber2|percent:'5.4-8':'in'}}</td>
        </tr>
    </tbody>
</table>

Output



DecimalPipe

DecimalPipe is used to display data in decimal with custom formatting.

Syntax

number_expression | number[:{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} [:locale]]

where minIntegerDigits, minFractionDigits and maxFractionDigits have default values 1,0 and 3 respectively. 

component.ts 

mynumber: number = 0.51003003039303033030;
mynumber2: number = 0.05;

component.html

<div class="row" style="margin-bottom:5px">
<div class="col-md-6 col-md-offset-3"><span style="font-size:24px; font-weight:bold">DecimalPipe (number) Example</span></div>
</div>
<table class="table table-inverse" style="font-size:20px; font-weight:400">
    <thead class="bg-primary">
        <tr>
            <th>#</th>
            <th>Original Data</th>
            <th>Format 1</th>
            <th>Format 2</th>
            <th>Format 3</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-success">
            <th scope="row">1</th>
            <td>{{mynumber}}</td>
            <td>{{ mynumber|number}}</td>
            <td>{{ mynumber|number:'2.4-8'}}</td>
            <td>{{ mynumber|number:'5.4-8':'in'}}</td>
        </tr>
        <tr class="bg-warning">
            <th scope="row">2</th>
            <td>{{mynumber2}}</td>
            <td>{{ mynumber2|number}}</td>
            <td>{{ mynumber2|number:'2.4-8'}}</td>
            <td>{{ mynumber2|number:'5.4-8':'in'}}</td>
        </tr>
    </tbody>
</table>

Output

CurrencyPipe 

CurrencyPipe displays data with currency format.

Syntax

number_expression | currency[:currencyCode[:display[:{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} [:locale]]]] 

Example

{{ mynumber|currency:'INR'}}
{{ mynumber|currency:'INR':'code'}}

component.ts 

mynumber: number = 0.51003003039303033030;
mynumber2: number = 0.05;

component.html

<h3> CurrencyPipe Usage Example</h3>
<p>Original data: <b>{{mynumber}}</b></p>
<p>Default Format: <b>{{ mynumber|currency}}</b></p><br />

<div class="bd-example">
    <table class="table table-inverse">
        <thead class="bg-primary">
            <tr>
                <th>#</th>
                <th>Formats</th>
                <th>Format 1</th>
                <th>Format 2</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-success">
                <th scope="row">1</th>
                <td>USD Formats</td>
                <td>{{ mynumber|currency:'USD'}}</td>
                <td>{{ mynumber|currency:'USD':'code'}}</td>
            </tr>

            <tr class="bg-warning">
                <th scope="row">2</th>
                <td>CAD Formats</td>
                <td>{{ mynumber|currency:'CAD'}}</td>
                <td>{{ mynumber|currency:'CAD':'code'}}</td>
            </tr>

            <tr class="bg-danger">
                <th scope="row">3</th>
                <td>INR Formats</td>
                <td>{{ mynumber|currency:'INR'}}</td>
                <td>{{ mynumber|currency:'INR':'code'}}</td>
            </tr>
        </tbody>
    </table>
</div>

Output

SlicePipe

SlicePipe is used to return a substring or a subset of a string array. 

Syntax

expression | slice:start[:end] 

Examples

{{text | slice:2}}
{{text | slice:-3:-2}}

component.ts

public text: string = 'ABCDEFGHIJKLMN'; 

component.html 

<h4>Original Text</h4>
<h4 class="bg-primary text-white">{{text}}</h4>
<hr />

<h4>Skip First 2 Character from string</h4>
<h4 class="bg-primary text-white">{{text | slice:2}}</h4>

<hr />
<h4>Get First 5 Characters from string</h4>
<h4 class="bg-primary text-white">{{text | slice:0:5}}</h4>

<hr />
<h4>Get Last 2 Character from string</h4>
<h4 class="bg-primary text-white">{{text | slice:-2}}</h4>

<h4>Get Third Last Character from string</h4>
<h4 class="bg-primary text-white">{{text | slice:-3:-2}}</h4>

Output

JsonPipe

JsonPipe converts a value into JSON string. 

Syntax

expression | json

Example

{{countries | json}}

component.ts 

public countries =
   [{ "id": 1, "country": "Russia" },
    { "id": 2, "country": "Canada" },
    { "id": 3, "country": "China" },
    { "id": 4, "country": "Brazil" },
    { "id": 5, "country": "India" }];

component.html

<h4>Render all 5 countries</h4>
<pre>{{countries | json}}</pre>

Output

Using ‘slice’ and ‘json’ pipes together

As I said at the start of this article, we can use multiple pipes with the same expression. So, let’s use ‘slice’ and ‘json’ pipes together.

component.html

<h4>Render countries 2<sup>nd</sup> and 3<sup>rd</sup> elements</h4>
<pre>{{countries | slice:1:3 | json }}</pre>

Output

Custom pipes

So far, we have seen a lot of built-in pipes. Let’s have a look at how to create custom pipes.

Custom Pipe: AlternateCase

I am going to create my first custom pipe. So far, we have seen in-built case conversion pipes for lower case, upper case and title case. Now, create a custom pipe for the alternate case.

Step 1 - Add a typescript file

Add a typescript file with name “alternatecase.pipe.ts” for creating custom pipe alternatecase.

Step 2 - import Pipe and PipeTransform

Go to the file “alternatecase.pipe.ts” and import Pipe and PipeTransform from '@angular/core' . 

import {Pipe, PipeTransform } from '@angular/core';

Step 3

Write a class for alternatecase pipe and implement the transform method of PipeTransform interface.

export class AlternateCasePipe implements PipeTransform {
    transform(value: string): string {
        if (!value) return value;
        return value.split(/\b/g).map(word => alternatecaseWord(word)).join('');
    }
}

function alternatecaseWord(word: string) {

    if (!word) return word;
    let altString = '';

    for (var i = 0; i < word.length; i++) {

        if (i % 2 == 0) {
            altString += word[i].toUpperCase();
        }
        else {
            altString += word[i].toLowerCase();
        }
    }

    return altString;
}

Step 4 - Decorate the class with @Pipe decorator

@Pipe({ name: 'alternatecase' })

Following is the complete code for alternatecase.pipe.ts.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'alternatecase' })
export class AlternateCasePipe implements PipeTransform {
    transform(value: string): string {
        if (!value) return value;
        return value.split(/\b/g).map(word => alternatecaseWord(word)).join('');
    }
}

function alternatecaseWord(word: string) {

    if (!word) return word;
    let altString = '';

    for (var i = 0; i < word.length; i++) {

        if (i % 2 == 0) {
            altString += word[i].toUpperCase();
        }
        else {
            altString += word[i].toLowerCase();
        }
    }

    return altString;
}

Step 5 - add AlternateCasePipe in declarations section of app.shared.module.ts

Go to the file app\app.shared.module.ts and add the following highlighted lines.

Code Snippet 

import { AlternateCasePipe } from '../app/customPipes/alternatecase.pipe';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent,
        AngularPipesDemoComponent,
        CaseConversionExampleComponent,
        AlternateCasePipe
    ],
    imports: [
        CommonModule,

Demo Alternate Case Pipe

So finally, we have created a custom pipe for the alternate case. Now, we should go for a demo of alternate case pipe.

Go to the component where we have written the code of demo of other pipes and add the following lines.

component.ts

public name: string = 'banketeshvar narayan';
public text: string = 'ABCDEFGHIJKLMN';

component.html

<h4 class="bg-primary text-white">Custom Pipe : Alternate Case Demo</h4>

<h4>Original Text:  <b class="text-success">{{name}}</b> </h4>
<h4>Formatted Text: <b class="text-primary">{{name | alternatecase}}</b></h4>

<br />
<h4>Original Text:  <b class="text-success">{{text}}</b></h4>
<h4>Formatted Text: <b class="text-primary">{{text | alternatecase}}</b></h4>

Output

Custom Pipe: Opinion Pipe

So far, we have created a custom pipe to transform a string to the alternate case. Let’s have a look at another example. 

We have the following JSON.

public questions = [
        { "statement": "Statement 1", "answer": 1 },
        { "statement": "Statement 2", "answer": 2 },
        { "statement": "Statement 3", "answer": 3 },
        { "statement": "Statement 4", "answer": 4 },
        { "statement": "Statement 5", "answer": 5 },
        { "statement": "Statement 6", "answer": 6 }
    ]

Where answers 1 to 6 represent the opinions 'Very Strongly Agree', 'Strongly Agree', 'Agree’, 'Disagree’,  'Strongly Disagree' and 'Very Strongly Disagree' respectively. Now, we would like to display it on UI.

HTML

<table class="table table-inverse" style="font-size:20px; font-weight:400">
    <thead class="bg-primary">
        <tr>
            <th>Statement</th>
            <th>Opinion</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let question of questions">
            <td>{{ question.statement }}</td>
            <td>{{ question.answer }}</td>
        </tr>
    </tbody>
</table>

Output

 HTML page Output will look like the below screenshot.

However, it does not look good. It would be better if we display descriptive text for an opinion. So, let’s create a custom pipe to transform the numeric opinion value to meaningful descriptive text.

Repeat the same steps which have been mentioned for creating alternate case pipe and finally the typescript file will have the following code,

opinion.pipe.ts

import { Pipe, PipeTransform } from '@angular/core'

@Pipe({ name: 'opinion' })
export class OpinionPipe implements PipeTransform {
    transform(value: number): string {
        switch (value) {
            case 1: return 'Very Strongly Agree'
            case 2: return 'Strongly Agree'
            case 3: return 'Agree'
            case 4: return 'Disagree'
            case 5: return 'Strongly Disagree'
            case 6: return 'Very Strongly Disagree'
            default: return value.toString();
        }
    }
}

Please do remember to add it to “app.shared.module.ts” file as well.

Now go to the HTML code and replace

<td>{{ question.answer}}</td>

with

<td>{{ question.answer | opinion }}</td>

Now, your HTML page will render a meaningful output. Following is the screenshot of the same.