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

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.
  1. import { Component, OnInit } from '@angular/core';
  3. @Component({
  4. selector: 'app-product',
  5. templateUrl: './product.component.html',
  6. styleUrls: ['./product.component.css']
  7. })
  8. export class ProductComponent{
  9. product={
  10. productName:"Dell Laptop",
  11. productRating:4.9745,
  12. productSold:1250,
  13. productPrice:49999,
  14. productLaunch:new Date(2019,6,1),
  15. 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."
  16. }
  17. }
Step 6
Open product.component.html and write the below code:
  1. <div class="div container py-4">
  2. <h3 class="text-center text-uppercase">Product List</h3>
  3. <table class="table table-bordered">
  4. <thead>
  5. <tr>
  6. <th>Product Name</th>
  7. <th>Product Rating</th>
  8. <th>Product Sold</th>
  9. <th>Product Price</th>
  10. <th>Product Launch</th>
  11. </tr>
  12. </thead>
  13. <tr>
  14. <td>{{product.productName|uppercase}}</td>
  15. <td>{{product.productRating |number:'1.1-1'}}</td>
  16. <td>{{product.productSold |number}}</td>
  17. <td>{{product.productPrice |currency:'INR':true:'3.2-2'}}</td>
  18. <td>{{product.productLaunch | date:'dd-MMM-yyyy'}}</td>
  19. </tr>
  20. <tr>
  21. <td colspan="5">Description:{{product.productDescription|summary:50}}</td>
  22. </tr>
  23. </table>
  24. </div>
Step 7
Open app.component.html to take the selector name from product.component.ts.
  1. <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
  1. 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.
  1. import { Pipe, PipeTransform } from '@angular/core';
  3. @Pipe({
  4. name: "summary"
  5. })
  6. export class SummaryPipe implements PipeTransform {
  7. transform(value: string, limit?: number) {
  8. if (!value)
  9. return null;
  10. let actualLimit = (limit) ? limit : 50;
  11. return value.substr(0, actualLimit) + '.....';
  12. }
  13. }
Step 9
Now register custom pipe in app.module.ts
  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { SummaryPipe } from './CustomPipe/Summary.pipe';
  5. import { AppComponent } from './app.component';
  6. import { ProductComponent } from './product/product.component';
  8. @NgModule({
  9. declarations: [
  10. AppComponent,
  11. ProductComponent,
  12. SummaryPipe
  13. ],
  14. imports: [
  15. BrowserModule
  16. ],
  17. providers: [],
  18. bootstrap: [AppComponent]
  19. })
  20. export class AppModule { }
Step 10
Now it’s time run application. Run the application by typing the following command:
ng serve –open