Angular modules with services, components and pipes

Quick Tip - Angular 2 Modules

Angular 2 has landed! Rejoice! After 18 beta releases and 8 release candidates, the final version saw the light of day in September and you can now consider it stable enough to use it. It’s a totally different framework when you try to compare it with 1.x but the principles are the same. You get the proper tools to build your web application from the UI to the data retrieval and everything in between. The plan is to have multiple quick tips appear here as I play with it. To start this process I will try to explain one of the concepts that took me a while to grasp once I started migrating one of my applications to Angular 2, the module system!

Angular feature modules

This post’s goal is to demonstrate how to define a module that contains components, services and pipes while at the same time making some of them available for usage in other modules. Most of the times a module with all these types of content is called a feature module because it contains all the necessary parts to make a feature of your application work; components and pipes for the display and services for the logic and data handling (directives could also be a great example for the display).

Our hypothetical module will contain all the parts to display information about the courses of a university. We will need the following classes:

  • Course,  a basic model to describe a course
  • CourseResource, a service responsible of getting the courses from a server
  • CourseItem, a component which renders the information of a single course
  • SemesterPipe, a pipe which transforms the semester information of a course
  • CourseModule, the actual module containing the configuration for the other parts

Since the actual implementation of the classes is beyond the scope of this tip, I will add only the required bits of code for the model and the resource in the following code blocks and then we’ll move on to the more interesting parts.

 

The @Injectable() decorator in CourseResource allows the class to be injected with the dependencies it needs by the Angular injector.

Introducing SemesterPipe

Next class to implement will be the SemesterPipe. Its main job will be to transform the numeric value of the course’s semester property to a slightly different text which includes the ordinal suffix of the number. Pipes are the equivalent of Angular 1.x filters and they work the same inside your HTML templates. Let’s see how they are implemented in the TypeScript side of our code.

All the magic is happening through the @Pipe decorator which defines the name of the Pipe and lets Angular know what the type of the class is. We also implement the PipeTransform interface to be sure that the signature of the transform method is correct during compilation.

 

Introducing CourseItem

There is one more step before we implement our Module class, the CourseItem component. For the purposes of this guide, the template of the component will be included in the TypeScript file.

Our component seems a bit useless at this state. It only displays the name and semester of the course but it’s a very good demonstration of how to bring data inside a component (using the @Input() decorator) and how to use the pipe we have previously defined.

 

Finally, the module

A module in Angular 2 is just a class which is decorated with the NgModule() decorator. Its configuration is what will make it work or not. We’ll examine the configuration properties our example needs so that it can be reused somewhere else in our application.

  • imports – An array of the modules on which this module (and its content) depends to work.
  • declarations – An array of all the components, directives and pipes which are included in this module and are required for other components in this module.
  • exports – An array of all the component, directives and pipes which will be reused by other modules which will import this one
  • providers – An array of all the services which will be available from this module to the application’s injector

With that in mind, it’s time to think about what we need to import first. It seems that our project doesn’t do much and the only requirement for our module is the http module which is needed by the CourseResource. Another thing to note is that the pipe we have created will probably be useless for other modules so we will not export it. Let’s check the code

And there you have it! Once you add the CourseModule to the imports of another module, you will have the CourseItem and the CourseResouce available to use them however you want.

 

For more information about modules, the Angular team has a very helpful guide in their site.