Spread the love

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 ‘|’.


{{ 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.


<p>My Name is {{name | uppercase }}
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.

<p>Date is {{ datesobject | date:"MM/dd/yy" }} </p>
import { Component, OnInit } from '@angular/core';

  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

  1. 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.
  2. Import pipe import { Pipe, PipeTransform } from ‘@angular/core’;
  3. Create a decorator @Pipe
  4. Create a class and implement PipeTransform
  5. Implement the required method transform of PipeTransform
  6. Import Newly created pipe in module \app\app.module.ts

Or you can also create the pipe using ng generate

ng g pipe prettyname


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

  name: 'prettyname'
export class PrettynamePipe implements PipeTransform {

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

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

  selector: 'app-helloworld',
  template: '{{name | prettyname}}', 
export class HelloworldComponent implements OnInit {
  constructor() { }
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';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Output in browser:


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

Leave a Reply