Create A Custom Pipe In Angular

Introduction

 
In this article, we will learn how to create Angular applications using Custom Pipe.
 
Step 1
 
Create an Angular project setup using the below commands or however you create your Angular app
 
ng new custompipe
 
Create Custom Pipe In Angular 
 
Step 2
 
Open a new terminal and run the following below commands
 
Install Boostrap as a dependency in your app
 
npm install bootstrap
 
angular.json
  1. "styles": [  
  2.   "./node_modules/bootstrap/dist/css/bootstrap.css",  
  3.   "src/styles.scss"  
  4. ],  
Add the style boostrap url in angular.json file.
 
Step 3 - Pipe
 
Pipes are very useful in Angular. Pipe are a simple function in Angular, and a simple way to transform values in a template. A pipe takes in a value or values and it returns a value. This is great for simple transformations on data but it can also be used in other unique ways.
 
How to create a custome Pipe
 
Now we will create an Angular pipe then we will  implement the customepipe integration:
 
ng generate pipe blank
 
Create Custom Pipe In Angular 
 
App.module.ts
 
Now we will declarae custom pipe in app.module.ts,
  1. import { BrowserModule } from '@angular/platform-browser';   
  2. import { NgModule } from '@angular/core';  
  3. import { AppRoutingModule } from './app-routing.module';  
  4. import { AppComponent } from './app.component';  
  5. import { BlankPipe } from './blank.pipe';  
  6.   
  7. @NgModule({  
  8.   declarations: [  
  9.     AppComponent,  
  10.     BlankPipe  
  11.   ],  
  12.   imports: [  
  13.     BrowserModule,  
  14.     AppRoutingModule  
  15.   ],  
  16.   providers: [],  
  17.   bootstrap: [AppComponent]  
  18. })  
  19. export class AppModule { }  
Step 4 - 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
 
Next, we can implement some logic on our customepipe ts file
 
blank.pipe.ts
  1. import { Pipe, PipeTransform } from '@angular/core';  
  2. @Pipe({  
  3.   name: 'blank'  
  4. })  
  5. export class BlankPipe implements PipeTransform {  
  6.   transform(input: any, ...args: unknown[]): any {  
  7.     return (input === null || input === undefined || input ===" ") ? '-' : input;  
  8.   }  
  9. }  
Step 5
 
Next, we can open the app.component.ts and write some code.
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.scss']  
  7. })  
  8. export class AppComponent implements OnInit {  
  9.   title = 'customepipe';  
  10.   arrList= [  
  11.     { id: 1, name: 'Name1',value:null,status:'pending'},  
  12.     { id: 2, name: 'Name2',value:null,status:'pending' },  
  13.     { id: 3, name: 'Name3',value:'View',status:'pending' }  
  14.   ]  
  15.   constructor(){}  
  16.   ngOnInit() {}  
  17. }  
Step 6
 
Now, we will write integration on App.component.html
  1. <h4 class="t-center">{{title}}</h4>  
  2. <table>  
  3.   <thead>  
  4.     <tr>  
  5.       <th>NO</th>  
  6.       <th>Name</th>  
  7.       <th>Value</th>  
  8.       <th>Status</th>  
  9.     </tr>  
  10.   </thead>  
  11.   <tbody>  
  12.     <tr *ngFor="let item of arrList; let i = index ">  
  13.       <td data-column="NO">{{item.id}}</td>  
  14.       <td data-column="Name">{{item.name}}</td>  
  15.       <td data-column="Value">{{item.value | blank}}</td>  
  16.       <td data-column="Status">{{item.status}}</td>  
  17.     </tr>  
  18.   </tbody>  
  19. </table>  
</table>
 
Step 7
 
Now we will run the application
 
ng serve --port 4401
 
Create Custom Pipe In Angular 
 
In browser, we will get the following output...
 
Create Custom Pipe In Angular

Recommended Ebook

Crack Your Angular Interview

Download Now!
Similar Articles