Updates to Angular 2 that makes coding easier - Custom Pipes

 Oct 17, 2016

Awesome updates, hated by some and loved by others. Angular 2 is no different in this regard, being developed by Google we can expect future updates to optimise it further. So in this series of blogs I will like to cover some of the changes that was introduced just before the official release of Angular 2.

In this first blog I would like to go over the changes that was made to the Pipes, this was a big change in the way we set up our component’s view. In the release of version 2.0.0-rc.6 the following breaking changes was made in regards to pipes (changes effects custom pipes mostly):

1. Deprecated @Component.Pipes support was removed

Now to refresh your memory, we use Pipes to format our output data. By formatting data, we can make sure the data is displayed in a fashion that makes it easier to interpret by the user who consumes the data. Our focus in this blog will be on the Custom Pipes.

We start off by looking at the creation stage of the pipes, firstly we will look at the deprecated way and then follow it by using the updated way. In the following image you will see the older way of creating a pipe.

In the image above you should notice a few things:

  1. Importing the Pipe (Line 1)
  2. Decorating the class with the Pipe decorator and specifying a name (Line 3)
  3. The exported class should contain a transform method that will be used when applying the pipe (Line 6)

Next we will look at the newly updated way of creating a Pipe, this is showcased in the image below.

In this updated way take note of the following:

  1. We not only import the Pipe class but we also import the PipeTransform Interface. By implementing an interface, we force the class to have a transform method, whereas before we could have forgotten to implement it. (Line 1)
  2. The class still uses the Pipe decorator, but now also implements the interface as seen on line 4.

As you can see there are only minor changes to the creation of a Custom Pipe, so no difficulty introduced in that area.

Now jumping back to Angular 2 before the update, we need to look at how we would have used the Custom Pipe we created within the component of our choice. To perform this task, you had to do a few things to the component’s code, I will first show you the code and then explain the logic:

In the above image you can see the following:

  1. We import the “CharacterLengthPipe”, which is our custom pipe that we created and want to use in the component. (Line 2)
  2. We then add the Pipes property class to the Component decorator and specify that we want to use the “CharacterLengthPipe” Custom Pipe as a way to format data. (Line 6)
  3. Lastly, we added the Custom pipe to one of our expressions in the template (Line 5)

With all these in place with the newer version of Angular you will notice that you get an error stating: “The Pipe ‘charlength’ could not be found”. We will now go back to the newer version of Angular and look how to use that custom pipe we created. The first part of using a Pipe in Angular 2 is to add it to the declarations property of the app.module file, remember this file is like the glue of our application and brings in all components together. By adding the pipe declaration here, we can use that pipe anywhere in our application.

The following steps was taken in the App.module file:

  1. Import the custom pipe class, in my case it is called CharacterLengthPipe
  2. Add the Custom pipe class to the declarations property array of the NgModule decorator.

Once you have performed all the above steps, you can now go back to your app.component remove lines 2 and 6. Once removed your code should now look like the image below and you will notice that there is no need for explicit declarations for the Custom Pipe, allowing us to use the pipe whenever it is needed.

This new update forces us to use an alternative approach to making pipes work, but at least they made it easier and more reusable for us.

This will conclude my blog based on the update effecting the usage of Custom Pipes in your Angular 2 application and keep your eyes open for more of my blogs based on Angular 2.

For more information, take a look at New Horizons' Angular 2 training courses.

How do your Excel skills stack up?   

Test Now  

About the Author:

Auret Swanepoel  

As a recent addition to the New Horizons team, Auret is a highly skilled and qualified IT Technical trainer. He has been a Microsoft Certified Trainer (MCT) since 2008 and has since then, also become a Microsoft Certified Professional (MCP), a Microsoft Certified Technology Specialist (MCTS) and a Microsoft Certified Information Technology Professional (MCITP). With his international experience as a trainer in South Africa, Auret is able to adapt his teaching style to different audiences in the classroom and ensure that students are learning in a positive and collaborative environment.

Read full bio
Back to top