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

 

 

 

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

"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.scss"
],

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

 

 

 

App.module.ts

 

Now we will declarae custom pipe in app.module.ts,

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BlankPipe } from './blank.pipe';

@NgModule({
  declarations: [
    AppComponent,
    BlankPipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
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

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'blank'
})
export class BlankPipe implements PipeTransform {
  transform(input: any, ...args: unknown[]): any {
    return (input === null || input === undefined || input ===" ") ? '-' : input;
  }
}

Step 5

 

Next, we can open the app.component.ts and write some code.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'customepipe';
  arrList= [
    { id: 1, name: 'Name1',value:null,status:'pending'},
    { id: 2, name: 'Name2',value:null,status:'pending' },
    { id: 3, name: 'Name3',value:'View',status:'pending' }
  ]
  constructor(){}
  ngOnInit() {}
}

Step 6

 

Now, we will write integration on App.component.html

<h4 class="t-center">{{title}}</h4>
<table>
  <thead>
    <tr>
      <th>NO</th>
      <th>Name</th>
      <th>Value</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of arrList; let i = index ">
      <td data-column="NO">{{item.id}}</td>
      <td data-column="Name">{{item.name}}</td>
      <td data-column="Value">{{item.value | blank}}</td>
      <td data-column="Status">{{item.status}}</td>
    </tr>
  </tbody>
</table>

</table>

 

Step 7

 

Now we will run the application

 

ng serve --port 4401

 

 

 

In browser, we will get the following output...