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:
- Importing the Pipe (Line 1)
- Decorating the class with the Pipe decorator and specifying a name (Line 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:
- 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)
- 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:
- We import the “CharacterLengthPipe”, which is our custom pipe that we created and want to use in the component. (Line 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)
- 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:
- Import the custom pipe class, in my case it is called CharacterLengthPipe
- 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 NowNext up:
- Life has many, many stations. Having trouble getting to your next one?
- Do a quick forecast in Excel 2016
- Outlook on the Web in Exchange Server 2016
- Does good design sell itself?
- I'll have courtesy with my gelato, thanks.
- 6 conversations a new manager should have
- Updates to Angular 2 that makes coding easier - HTTP Client
- Define and solve a problem by using Excel Solver
- Seven steps to modifying employee behaviour
- Master Document in Word - Part 1
Previously
- Life has many, many stations. Having trouble getting to your next one?
- Data Recovery in Windows Server 2016
- Interviewing and avoiding the artful dodger!
- Remove all hyperlinks from an Excel sheet using VBA
- Your essential guide to performance feedback
- PRINCE2® Agile - Enhancing your project delivery
- Working with Styles - Part 5
- Microsoft Project 2013 & 2016: Levelling Gantt
- Make multiple copies of a Microsoft Excel spreadsheet in seconds
- What Sort of Leader are You?