Component decorator in Angular 2

What is a component decorator, what does it do and how is it implemented in a basic Angular 2 component.

Now, one of the basic functions that you are going to have to carry out in any development with Angular 2 is the decoration of components. In itself, it is nothing more than a statement of what a component will be like and the various pieces of which it consists.

In the article we explain only one of the parts that has the .ts file with the main Javascript / TypeScript code of a component. What we have seen so far was the class that, we said, acted as a controller, which is exported to the outside so that the main flow of execution of an application is able to know the component. In addition, it contains what is called a decorator function that we will learn about next.

what is a decorator

A decorator is a tool that we will have at our disposal in Javascript in the near future. It is one of the proposals to be part of the ECMAscript 2016 standard, also known as ES7. However, they are already available in TypeScript, so we can start using them already in Angular 2.

Basically it is an implementation of a software design pattern that itself serves to extend a function by another function, but without touching the original one, which is being extended. The decorator takes a function as an argument (the one you want to decorate) and returns that function with some additional functionality.

Decorator functions start with an “@” and are followed by a name. That name is that of what we want to decorate, which must already exist previously. We could decorate a function, a property of a class, a class, etc.

Look at the first line of code in your main component’s .ts file.

import { Component } from ‘@angular/core’;

That import is bringing us the Component class. In the next line it is then decorated with the corresponding “decorator”. It is not our goal to talk about the decorator pattern itself, nor to see the possibilities of this construction that we will surely have in the future ES7, so let’s focus on what we can do with Angular 2 using these decorators.

Note: One of the reasons why Angular 2 has taken TypeScript as a language is precisely because it allows the use of decorators. With TypeScript we can do ES7 code decoration right away, which makes code decoration much easier.

What information is added by the decorator

Angular 2 uses decorators to register a component, adding information so that it is recognized by other parts of the application. The form of a decorator is as follows:

@Component({ moduleId: module.id, selector: ‘test-angular2-app’, templateUrl: ‘test-angular2.component.html’, styleUrls: })

As you’ll notice, in the decorator we’re adding various component-specific properties. That information in this specific case is known as “annotation” and what we deliver is “metadata” (metadata) that does nothing more than describe the component that is being created. In this case they are the following:

• moduleId: This property may seem a bit strange, because it is always assigned the same value in all components. We really care little now, because it doesn’t add any customization. It is something that has to do with CommonJS and serves to be able to resolve relative URLs.
• selector: This is the name of the new tag that we will create when the component is rendered. This is the tag you’ll use when you want to place the component anywhere in the HTML.
• templateUrl: is the name of the .html file with the content of the component, in other words, the one with the code of the view.
• styleUrls: is an array with all the CSS style sheets that should be processed as local style for this component. As you can see, we could have a single style declaration, or several if we consider it necessary.

Note: That component annotation or decoration code is generated by Angular CLI. Also, when we create new components we will use the same Angular CLI to obtain the scaffolding (skeleton) from which we will start. Therefore, you don’t need to memorize the syntax for decoration, because it will be given to you already. In any case, you will have to modify it if you want to change the behavior of the component, the file names of the template (view), style sheets, etc.

We don’t need to give much more information about decorators at this time. It’s something we should start using to develop components in Angular 2, but we don’t have to worry too much just yet, because we won’t need to touch much on them for now.

It was important to finish our analysis of the basic application of Angular 2. With this we believe that the code of the first component that generates the starter application created by Angular CLI should be clear. Now that you know the basics, we can continue with other things that will surely be more entertaining.