Custom Pipe in Angular

Hello and welcome to my new article on custom pipe in angular.
In angular pipe is simple way to transform data within our application . One can change formatting of data using pipe . Here we are gonna see how we can create a simple custom pipe in angular .
Let’s dive into the code .

Lets create a pipe for removing vowel from a string.

command for creating pipe as bellow

ng g pipe pipe-name

ng g pipe custom-pipe

It will create custom-pipe.pipe.ts file .

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

@Pipe({
  name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

Now add your logic into the pipe codes for removing vowel

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

@Pipe({
  name: 'removeVowel'
})
export class removeVowel implements PipeTransform {

  transform(value: string): unknown {
    return value.replace(/[aeiou]/gi, '');
  }

}

In above code we have a pipe name and transform function which is responsible for formatting data.

Include the pipe we created in app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomPipeComponent } from './components/custom-pipe/custom-pipe.component';
import { removeVowel } from './custom-pipe.pipe';

@NgModule({
  declarations: [
    AppComponent,
    CustomPipeComponent,
    removeVowel
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now we have added our pipe in the module.ts

<h1>{{'Hello World' | removeVowel}}</h1>

OUTPUT : Hll Wrld

In angular there are two types of pipes

1. pure pipe
2. impure pipe

1 . Pure Pipe

A pure pipe is pipe that only transforms data it receives and it does not have any side effects that means a pure pipe is executed when only input of the pipe changes. Lets have and example.

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

@Pipe({
  name: 'convertLetter',
  pure: true
})
export class ConvertLetterPipe implements PipeTransform {

  transform(value: string): unknown {
    return value.toUpperCase();
  }

}

The above code is pure pipe because it has set flag pure true .It only converts letter to uppercase .It does not have any side effects.

2 . Impure Pipe

An impure pipe is a pipe in Angular that can have side effects and is executed on each change detection cycle. This means that an impure pipe is executed more frequently, which can have negative performance implications for the application. Impure pipes should be used carefully and only when necessary. It is generally recommended to use pure pipes whenever possible.

Here is an example bellow

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

@Pipe({
  name: 'ImpurePipePipe',
  pure: false
})
export class ImpurePipePipe implements PipeTransform {
  transform(values: number[]): number[] {
    return values.filter(value => value % 2 === 0);
  }
}

<p>{{ [1, 2, 3, 4, 5] | ImpurePipePipe }}</p>

It will display only even numbers.

Here’s source code

Thanks for reading.