Custom Pipes in Ionic 2

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:

13330

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