Tutorial hero image
Lesson icon

Custom Pipes in Ionic 2

1 min read

Originally published January 17, 2017

Pipes are a convenient way to modify data before displaying it to users in templates. You can think of them as a pipe in a literal sense. You can push data through this pipe, something happens to it inside of the pipe, and when the data comes out the other end it looks different just like you would if you crawled through a sewarage pipe.

There's a variety of uses for them, but in this video tutorial we are going to build a pipe that will convert seconds, into an hours-minutes-seconds format, like this:

3 hrs, 42 mins, 10 secs

insetad of:


which is the equivalent in seconds. The video uses an example from an application I built recently called permatimer. Here's the video:

Video Notes

  • You can generate a new pipe using the ionic g pipe MyPipe command
  • A pipe can be used in a template like this: {{ someBinding | myPipe }}
  • You can also supply additional arguments to a pipe: {{ someMinding | myPipe:{arg1: true, arg2: false} }}
  • Whatever the transform method in your pipe returns is what will be displayed to the user
  • Any pipes need to be added to the declarations array in app.module.ts before they can be used

If you enjoyed this article, feel free to share it with others!