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';
  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';
  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