How to make a custom pipe in angular? In 3 steps.

Complete guide to starting making custom Angular Pipe. We will create a pipe that will replace ‘,’ with ‘-’ in a string.


ngular Pipe is a simple way to transform values, A pipe takes in a value or values and then returns a value. This is great for simple transformations on data but it can also be used in other unique ways.

Let's start our Custom Pipe

Angular provides the feature to implement a custom pipe by implementing the interface of PipeTransform.

We are going to build a pipe that will replace the ‘,’ sign within the string with the 5 commas.

Step 1: Create a custom pipe file: customPipe.ts

import { Pipe, PipeTransform } from "@angular/core";
name: "CommaToHyphen"
export class CommaToHyphenPipe implements PipeTransform {
transform(value: string, numberTime: number): string {
let n = value;
let separator = ''
for(let i = 0; i < numberTime ; i++) separator += '-'
return n.split(",").join(separator);

Step 2: Importing the Custom Pipe to app.module.ts

import { NgModule } from “@angular/core”;
import { BrowserModule } from “@angular/platform-browser”;
import { FormsModule } from “@angular/forms”;
import { AppComponent } from “./app.component”;
import { CommaToHyphenPipe } from “./customPipe”;
imports: [BrowserModule, FormsModule],
declarations: [AppComponent, CommaToHyphenPipe],
bootstrap: [AppComponent]
export class AppModule {}

Step 3: Use it

app.component.tsimport { Component, VERSION } from “@angular/core”;
selector: “my-app”,
templateUrl: “./app.component.html”,
styleUrls: [“./app.component.css”]
export class AppComponent {
randomString = “Manan,Tusar”;
{{randomString | CommaToHyphen: 1}}
{{randomString | CommaToHyphen: 5}}
{{randomString | CommaToHyphen: 10}}

Some built-in Pipe

  1. Currency: currency
this.a = 10
{{a | currency}}

2. Data and Time: date

component.ts: = new Date()
{{today | date:'short'}}
6/15/15, 9:03 AM


Angular Pipe is very useful and can help you to make custom transform to string or number with the clean structure of the project.

I am Frontend Developer, exploring the power of Javascript. I have worked on Angular, ReactJS and React Native.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store