How to Create and Implement a Custom Pipe in Ionic

Pipes are simple functions you can use to transform a specific string, currency amounts, dates, and other data to display in your specific HTML pages. We can use it as a common function.

For example, you have many pages where you want to display a date in a specific format then why copy Paste the same function for rendering in HTML views, you would use a pipe to show the date as of April 21, 1998, or any format that you want to show in HTML rather than the raw string format.

There are many inbuild pipes in angular or ionic like DatePipe , UpperCasePipe , LowerCasePipe, etc.

In this blog, I will discuss how to create a custom pipe and how to implement It.

Please follow the Step by step discussion how to create a custom pipe(md-to-html):

Step 1: Create a folder name by pipe.

Step 2: Go in the terminal or command prompt of your project path and paste this command and hit enter

ionic generate module pipe/pipemodule

In this command, the pipe is the folder name and pipemodule is the module name. The module is creating in this pipe folder automatically.

Step 3: Paste the next command and hit enter 

ionic generate pipe pipe/mdtohtml

In this command, the pipe is folder name and mdtohtml is pipe name.

Step 4: Link up mdtohtml pipe in pipe module like this screenshot 

Step 5: Create functionality in mdtohtml.pipe.ts like this screen shot

Here is the below screenshot.

Step 6: It’s important to remove or comment pipe declaration in app.module.ts like this

Step 7: Import PipemoduleModule in your page where you want to use it like this

Here is the below screenshot.

Step 8: Implement in html page like this

Step 9: Implement is your ts for dummy html like this

Here is the below screenshot.

And this is the final output

Conclusion:

Custom Pipe is very important in Ionic Mobile app development. Please read and share your reviews in the comment section. See you on my next blog.