Angular | Create Custom Pipes

                  Angular  | Create Custom Pipes

 Our applications may have a lot of data for presentation, But for creating a good user experience it is preferable to see in a more understandable format like March 12, 2010 is better to read then Mon Mar 12 2010 15:23:40 GMT-0700 (Pacific Daylight Time).

This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 & Angular 12

For such small and repeated tasks of transforming values in other formats we used to use Filters in AngularJS version 1, But after Angular 2 we have pipes which serve similar tasks and once defined can be used anywhere in the application.

We will discuss more Pipes using Angular’s latest stable version 7.

How to Create Simple Custom Pipes?

First, create a new Angular application by running following in CMD Prompt using Angular CLI.

Install NodeJS then Angular CLI as follows

$ npm install -g @angular/cli
Copy

Create new Angular project

$ ng new NG7Pipes
$ cd NG7Pipes
$ ng serve --open
Copy

As now we have a new project ready, create a new file custom.pipe.ts in the app folder.

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({
    name:'appendDollar'
})
export class appendDollarPipe implements PipeTransform {
    transform(value:string, pretext:string): string{
        return value+pretext;
    }
}
Copy

This is the simplest Pipe which we just created above. This will simply append a $ sign after value we pass then return it.

Add this pipe in app.module.ts file in declarations array

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { appendDollarPipe } from './pipes/appendText.pipe';

@NgModule({
  declarations: [
    AppComponent,
    appendDollarPipe
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In app.component.ts file, define some value to variable to test our Pipe.
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Angular 7 Pipes';
  costOfMyCoffeeCup:number;

  constructor(){
    this.costOfMyCoffeeCup = 6;
  }
}
In the app.component.html file, we can use the filter as follows
<p>
     {{costOfMyCoffeeCup | appendDollar}}
</p>
Copy
This will output as 6$

How to pass parameters in custom Pipes?
In some situations, we may need to pass some parameters with value. To pass parameters we use a colon ( : ) separated values up to any number.
for example, let’s modify above Pipe to take currency name then show output.
@Pipe({
    name:'appendCurrency'
})
export class appendCurrencyPipe implements PipeTransform {
    transform(value:string, currency:string): string{
        return value+currency;
    }
}
Copy
In HTML we will change usage as follows
{{costOfMyCoffeeCup | appendCurrency:'EUR'}}
Copy