What is pipe in angular and create a custom pipe?

Pipes are used in angular to transform the data or value. Pipes can be able to transform any type of data type like string, date, currency or any data. It can be used both in template as well in component.

We can use pipes anywhere in our application and it required one time declaration in module.

Syntax of pipe:

We denotes pipe using symbol ‘|’.

Example:

{{ name | pipe_name }}

There is 6 types of in-built pipes in angular

DatePipe: Used for formatting the date.
UpperCasePipe: Used for transform the string into upper case.
LowerCasePipe: Used for transform the string into lower case.
CurrencyPipe: Used for a number to a currency string.
DecimalPipe: Used for Transforms a number into a string with a decimal point.
PercentPipe: Used for Transforms a number to a percentage string.

Example:

helloworld.html.ts
helloworld.component.ts

helloworld.html.ts

<p>My Name is {{name | uppercase }}

helloworld.component.ts

export class HelloWordComponent {
  name = 'devin'; // name is in lowe case
 
}

<p>The hero's birthday is {{ birthday | date }}</p>

We can also use two pipe simultaneously

<p>My Name is {{name | uppercase | lowercase }}

Parameterised pipe

Angular also support passing the parameters to pipe. let’s have an example of date pipe.

date.component.ts
date.compotent.html

date.component.ts

<p>Date is {{ datesobject | date:"MM/dd/yy" }} </p>

date.compotent.html

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

@Component({
  selector: 'date-component',
  templateUrl: './date.component.html'
})
export class DateComponent {
  dateobject = new Date(1991, 4, 7); // April 7, 1991 -- since month parameter is zero-based
 }

How to create custom pipe in angular ?

Custom pipe is same as built-in pipe but we need to register and create their logic own.

Steps to create a pipe

Create file anywhere in the project or create a specific folder for pipe and then create pipe in that folder ex. app\pipes\prettyname.pipe.ts.
Import pipe import { Pipe, PipeTransform } from ‘@angular/core’;
Create a decorator @Pipe
Create a class and implement PipeTransform
Implement the required method transform of PipeTransform
Import Newly created pipe in module \app\app.module.ts

Or you can also create the pipe using ng generate

ng g pipe prettyname

Example:

prettyname.pipe.ts
helloworld.component.ts
app.module.ts

prettyname.pipe.ts

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

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

  transform(value: string, ...args: unknown[]): string {
   
    return value.replace(new RegExp("_", 'g')," ").toUpperCase();
  }

}

helloworld.component.ts

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

@Component({
  selector: 'app-helloworld',
  template: '{{name | prettyname}}', 
})
export class HelloworldComponent implements OnInit {
  name="test_with_bad_name";
   
  constructor() { }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HelloworldComponent } from './helloworld/helloworld.component';

import { PrettynamePipe } from './prettyname.pipe';

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

Output in browser:

TEST WITH BAD NAME

In the above pipe prettyname we have transformed the string to pretty string.