Tutorial hero
Lesson icon

Custom Pipes in Ionic 2

Originally published January 17, 2017 Time 2 mins

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
Learn to build modern Angular apps with my course