Custom Pipes – Angular

Custom Pipes - Angular

Pipes are used for transforming or formatting your data from within your templates. Angular comes bundled with a large number of built-in pipes including uppercase, lowercase, date, currency, and percent. However, there is a good chance that you might run into scenarios where you’ll need to create your own custom pipes.

In this post, we’re going to create our own custom pipe. We’re going to build pipe which accepts a number and returns it’s square. We’ll start by creating a new Typescript file ‘square.pipe.ts’.

Next thing we’ll do is import Pipe decorator and PipeTransform interface at the top of that file.

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

Next, we’ll create a class SquarePipe which implements the PipeTransform interface and we’ll decorate it with Pipe decorator.

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

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

The value of name property is used to refer to the pipe inside the template.

Now, we’ll create a method called transform which accepts the value that needs to be processed and returns it’s square.

transform (value: number): number {
    if (isNaN(value)) {
      return value;
    }

    return value * value;
  }

The if condition determines if the value to be processed is a number. If not we’ll return the original value.

The final code is as follows:

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

@Pipe({
  name: 'square'
})
export class SquarePipe implements PipeTransform {
  transform (value: number): number {
    if (isNaN(value)) {
      return value;
    }

    return value * value;
  }
}

Before using the pipe, we need to make our Angular app aware of the pipe. We can do that by adding pipe to our declarations array in the module.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SquarePipe } from './square.pipe';

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

You can use our custom pipe in following way.

{{ num | square }}

Passing arguments to the pipe

You can also pass parameters to your pipe. For example, we’re passing city name as parameter to greeter pipe.

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

@Pipe({
  name: 'greeter'
})
export class GreeterPipe implements PipeTransform {
  transform (value: string, city: string): string {

    return `Hello ${value}! Welcome to ${city}.`
  }
}

You can use the above pipe in following way.

{{ 'John' | greeter : 'Pune' }}

The above code will produce following output.

Hello John! Welcome to Pune.

I hope you found this post about Angular Pipes useful. If you have any query or feedback feel free to drop a comment.

Useful Read: Inject Document In Angular

One thought on “Custom Pipes – Angular”

Leave a Reply

Your email address will not be published. Required fields are marked *