Create A Custom Pipe In Angular

Introduction 

 

This article gives you an overview of using pipes and also create a custom pipe in Angular.

 

What is a Pipe in Angular?

 

Pipes are used for data transformations in an Angular application. A pipe takes in data as input and transforms it into the desired 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 is implemented by pipes in order to perform a transformation. Angular invokes the transform method with the value of a binding as the first argument and any parameters 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

 

Now it’s time run application. Run the application by typing the following command:

 

ng serve –open