Defining our pipe

The Pipe is a decorator that takes an object literal; we need to at least give it a name property:

@Pipe({ name : 'myPipeName' })

This means that once used, we will refer to its name property like so:

{{ value | myPipeName }}

The PipeTransform is an interface that we need to implement. We can easily do so by adding it to our class like so:

@Pipe({ name : 'myPipeName' })
export class MyPipeClass {
transform( value: any, args: any[]) {
// apply transformation here
return 'add banana ' + value;
}
}

Here, we can see that we have a transform method, but also the first argument being the value itself and the rest is args, an array with any number of arguments you provide it. We've already shown how to use this Pipe, but if supplying arguments, it looks a little bit different, like so:

{{ value | myPipeName:arg1:arg2 }}

It is worth noting that for every argument we supply, it ends up in the args array and we separate it with a colon.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset