Creating your own Angular2 pipe.

Creating angular 2 pipe is easy.

First we need to create our pipe component and then wire up into basic component.

Lets get started. We are going to create a pipe component that takes a given number and add it up with a hard coded number like this.

{{ 1 | addup: 10 }}

1 is the given number.
10 is a hard coded number.

Lets create our pipe component. As you can see, we only need to decorate with @Pipe and implement PipeTransform and override "transform method"



And lets use it in our component :-



So we are importing our pipe "Addup" component in and then we need to inject our pipe in our component.

Finally, use the | operator to apply our newly created operator.

That's it.