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 MyPipecommand - 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
transformmethod in your pipe returns is what will be displayed to the user - Any pipes need to be added to the
declarationsarray in app.module.ts before they can be used