How to Create Custom Pipe in Angular 13 Application

Pipe tutorial for Angular 12; In this tutorial, we’ll learn about Angular’s default and custom pipes. Angular comes with a plethora of built-in Pipes that can help you solve a variety of programming issues while designing a single-page web application.

We’ll also learn how to build custom Angular Pipe from the ground up. Let’s get started without further hesitation:

Angular 13 Pipe Example

Working with Angular Pipes

Angular Built-in Pipes
Creating Custom Pipe in Angular

Getting Started

Pipes are incredibly important when it comes to managing data within interpolation " | ", and we’ll talk about them in Angular. Pipes were once known as filters in Angular, but they are now known as Pipes.

The letter | can be used to alter data. The syntax for the same can be found below.

{{ i will become uppercase one day | uppercase }}

Dates, arrays, texts, and integers are all acceptable inputs for pipes. | is used to separate inputs. Before being shown in the browser, the inputs will be transformed into the desired format.

We’ll take a look at a few pipe-related instances.

We’re attempting to show the given text in uppercase in the given example. You’ll be able to do that with the use of pipes, as demonstrated below —

The convertText variable is defined in the app.component.ts file –

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  convertText: string = "I Am Being Managed By Pipes";
}

The following code section can be found in the app.component.html file.

app.component.html

<div style="text-align:center">
  <img width="230" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  <div style="padding-top: 30px">
    {{convertText | lowercase}}
  </div>
  <div style="padding-top: 30px">
    {{convertText | uppercase}}
  </div>
</div>

Angular Built-in Pipes

Angular Pipes allow you to rapidly recreate data in your Angular app. Angular has a built-in Pipes API that allows you to quickly change your data. You may also use it to make custom Pipes in your app. Let’s take a look at some of the most helpful Angular Pipes.

Built-in Angular Pipes

Async Pipe
Currency Pipe

Date Pipe
Slice Pipe
Decimal Pipe

Json Pipe
Percent Pipe
LowerCase Pipe

UpperCase Pipe

How to Use Built-in Pipes in Angular 13

Let’s see how we may make advantage of the built-in Angular pipes.

1. Async Pipe

When obtaining data in the form of observables, the Async pipe is regarded the best technique. The async pipe automatically subscribes to an Observable/Promise and returns the values delivered.

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

2. Currency Pipe

The angled currency pipe allows you to convert numbers between different currencies.

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
    <div style="text-align:center">
      <h3> Currency Pipe</h3>
      <p>{{ itemPrice | currency:'USD':true }}</p>      
      <p>{{ itemPrice | currency:'EUR':true}}</p>
      <p>{{ itemPrice | currency:'INR' }}</p>
    </div>
    `
})
export class AppComponent {
  itemPrice: number = 5.50;
}

3. Date Pipe

In Angular, the date pipe is used to format the Date.

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
    <div style="text-align:center">
      <h3>Date Pipe</h3>
      <p>{{ currentDate | date:'fullDate' }}<p>      
      <p>{{ numDateFormat | date:'medium' }}<p>
      <p>{{ getYear | date:'yy' }}<p>
      <p>{{ getTime | date:'Hm' }}<p>
    </div>
    `
})
export class AppComponent {
    currentDate = Date.now();
    numDateFormat = 1478496544151;
    getYear = 'Tue Dec 12 2018 11:20:18 GMT+0530';
    getTime = 'Wed Jan 20 2019 12:20:18 GMT+0530';
}

4. Slice Pipe

In Angular, the Slice pipe API creates a subset list or string.

<ul>
  <li *ngFor="let users of Users | slice:2">
    {{ users }}
  </li>
</ul>

5. Decimal Pipe

In Angular, the Decimal pipe is used to format decimal numbers. CommonModule in Angular has issues with the Decimal Pipe API.

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
    <div style="text-align:center">
        <h3>Decimal Pipe</h3>
	      <p> {{myNum1 | number}} </p>
        <p> {{myNum2 | number}} </p>
    </div>
    `
})
export class AppComponent {
    myNum1: number = 7.4364646;
    myNum2: number = 0.9;
}

6. Json Pipe

The JSON pipe API allows an Angular app to expose an object as a JSON string. Behind the scenes, it complements the JSON.stringify function.

{{ objectName | json }}

7. Percent Pipe

In Angular, the Percent pipe API converts an integer to its percentage value.

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
    <div style="text-align:center">
        <h3>LowerCase & UpperCase Pipe</h3>
        <!--output '35%'-->
        <p>A: {{numA | percent}}</p>
    
        <!--output '0,245.950%'-->
        <p>B: {{numB | percent:'4.3-5'}}</p>
    </div>
    `
})
export class AppComponent {
  numA: number = 0.349;
  numB: number = 2.4595;
}

8. LowerCase & UpperCase Pipe

In an Angular app, lowercase or uppercase pipes help format text to lower or upper case.

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
    <div style="text-align:center">
        <h3>LowerCase & UpperCase Pipe</h3>
	      <p> {{convertText | lowercase}} </p>
        <p> {{convertText | uppercase}}  </p>
    </div>
    `
})
export class AppComponent {
  convertText: string = "I Am Being Managed By Pipes";
}