Create A Custom Pipe In Angular

Introduction

This article provides an introduction of pipes and demonstrates how to build a custom pipe in Angular.

What is a Pipe in Angular?

An Angular application uses pipes for data transformations. Data is inputted into a pipe, which turns it into the required output.

List of inbuilt pipes in Angular

AsyncPipe
CurrencyPipe
DatePipe
DecimalPipe
DeprecatedCurrencyPipe
DeprecatedDatePipe
DeprecatedDecimalPipe
DeprecatedPercentPipe
I18nPluralPipe
I18nSelectPipe
JsonPipe
KeyValuePipe
LowerCasePipe
PercentPipe
SlicePipe
TitleCasePipe
UpperCasePipe

Step 1

Open the command prompt from the Windows search.

Step 2

Create a new project in Angular.
ng new AngularProject

Step 3

Open the project in Visual Studio Code. Type the following command to open it.
Code .

Step 4

Open a terminal in Visual Studio Code and create a component, “product”.
ng g c product

Step 5

Open the product.component.ts and write the code.

import { Component, OnInit } from '@angular/core';  
  
@Component({  
  selector: 'app-product',  
  templateUrl: './product.component.html',  
  styleUrls: ['./product.component.css']  
})  
export class ProductComponent{  
  product={  
      productName:"Dell Laptop",  
      productRating:4.9745,  
      productSold:1250,  
      productPrice:49999,  
      productLaunch:new Date(2019,6,1),  
      productDescription:"Dell DataSafeTM  Online Our optional online backup service offers data protection by enabling customers to back up data to a safe, remote storage site using a broadband connection. Dell DataSafe Online is designed to be easy, flexible and secure. After setup, it will automatically back up data and help protect against software, hardware and catastrophic failure."  
  }  
}

Step 6

Open product.component.html and write the below code:

<div class="div container py-4">  
    <h3 class="text-center text-uppercase">Product List</h3>  
    <table class="table table-bordered">  
        <thead>  
            <tr>  
                <th>Product Name</th>  
                <th>Product Rating</th>  
                <th>Product Sold</th>  
                <th>Product Price</th>  
                <th>Product Launch</th>  
            </tr>  
        </thead>  
        <tr>  
            <td>{{product.productName|uppercase}}</td>  
            <td>{{product.productRating |number:'1.1-1'}}</td>  
            <td>{{product.productSold |number}}</td>  
            <td>{{product.productPrice |currency:'INR':true:'3.2-2'}}</td>  
            <td>{{product.productLaunch | date:'dd-MMM-yyyy'}}</td>  
          </tr>  
          <tr>  
            <td colspan="5">Description:{{product.productDescription|summary:50}}</td>  
          </tr>  
    </table>  
</div>

Step 7

Open app.component.html to take the selector name from product.component.ts.

<app-product></app-product>

PipeTransform Interface

an interface that pipes implement to carry out a transformation. The transform method is called by Angular with a binding’s value as the first argument and any additional arguments as the second argument in list form.

Signature of Interface

interface PipeTransform { transform(value: any, ...args: any[]): any }

Step 8

Create a folder CustomPipe. In that folder, create a class with name Summary.pipe which summarizes the text or description in your desired words.

import { Pipe, PipeTransform } from '@angular/core';  
  
@Pipe({  
    name: "summary"  
})  
export class SummaryPipe implements PipeTransform {  
    transform(value: string, limit?: number) {  
        if (!value)  
            return null;  
        let actualLimit = (limit) ? limit : 50;  
        return value.substr(0, actualLimit) + '.....';  
    }  
}

Step 9

Now register custom pipe in app.module.ts

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
import { SummaryPipe } from './CustomPipe/Summary.pipe';  
  
import { AppComponent } from './app.component';  
import { ProductComponent } from './product/product.component';  
  
@NgModule({  
  declarations: [  
    AppComponent,  
    ProductComponent,  
    SummaryPipe  
  ],  
  imports: [  
    BrowserModule  
  ],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule { }

Step 10

ng serve

Create A Custom Pipe In Angular

Introduction

What is a Pipe in Angular?

List of inbuilt pipes in Angular

Tupesh Patel

Submit a Comment Cancel reply

Subscribe