3.6 Decorators

Hi folks, in this lesson we're going to take another look at decorators. We have mentioned them a couple of times already, and we've had a brief look at the module and component decorators. But I just want to cover them in a bit more detail now that we have a little bit of a better understanding of Angular. Decorators are interesting because they are currently part of TypeScript only and do not exist in JavaScript yet. They are that the proposal stage however, so they will almost certainly be coming to a future version of JavaScript. We don't need to fully understand how decorators work in order to learn how to use them in Angular. There are a number of different types of decorators in the ES Nex proposal, such as class decorators, property decorators, and method decorators. Angular also makes use of different types of decorators. We looked at the class decorators, ng module and component earlier in the course. Let's just take a quick look at them again. The NG module decorator is used in Angular modules. The decorator is used to specify meta information such as the components that make up a module, other modules to import. Services that should be available to all components within the module, and the root component which needs to be boot strapped. The decorator appears directly before the class that it decorates and is applied to the constructor of the class once the class has instantiated. The component decorator is used to specify meta data about a component. Such as the selector that is used to add the component to a page and the resources that it needs such as the templates and the stylesheets. This decorator is also a class decorator and it is specified directly before the class that it decorates. One more class director that we've seen already is the injectable decorator. I mentioned earlier that service should always have this decorator, it's not required in all scenarios, but it's just easier to always use it. The actual role with the injectable decorator is the only services which have other services injected into them through dependency injection need to have this decorator. If we try to inject a service into another service and that service doesn't have this decorator, the app will start to throw errors in the console. If we have a service that doesn't have any other services injected into its constructor, like this constant service then it won't need the decorator. The reason why it's just better to always add it, is to even if a service doesn't have any other services injected into it now. That doesn't mean that it will always not have any other services injected into it. As your application grows, you'll find that services gain more dependencies. And it's easier to just inject a service than it is to inject a service and remember to add the decorator. Other class decorators that Angular provides are the directive decorator, which is used to create directives, and the pipe decorator for creating pipes. A directive in Angular is used to define a new attribute that can be added to an element in a template. And a pipe is a filter that can be used to control what data is displayed in a template. We'll look at both directors and pipes later in the course. As well as class decorators, we can also use property or field decorators. Instead of being applied to entire classes, these decorators are applied only to individual properties or fields of the class. We haven't seen any of these in action yet, so let's see which ones are available. Probably the most commonly used property decorators are the input and output decorators. Which I use to pass data into, or out of a component. So, the first thing we'll need to do is import the decorators which are available via Angular's core module. So now let's say that we wanted to pass a value into the start component here, and we wanted to bind this to a property called data. In this case, we can just decorate this as an input. So we've specified a new public property called data, which could be of any type, and it's been decorated with @input. Angular would expect external data to come into this property from the components templates. We'll be looking at template binding in detail in the next section, so don't worry too much about this for now. Just understand that if we use the input decorator before the name of the property we are decorating, then it becomes an input property, and it doesnt require the public keyword, it will automatically be public. This decorator doesn't take any arguments, but it still needs to be invoked as if it were a method. The output decorator is used to send data out of a component, which is always in the form of an event. So, for this decorator, we need another dependency from Angular's core module. We need to bring in an event emitter, and again, we just decorate the property that we want to be an output property. So the format for this decorator is slightly different. Again it's specified directly before the property that we are decorating, and again it will automatically be public so it will be visible to the template. We specify the type information this time, and the outgoing data property is of the type event omitter. and the type of data that it will emit is a string, and we can create a new instance of the event emitted directly after the type. So the type information and the instance are all part of the same expression. There's actually a less verbose way that we can write an expression that means the same thing and is equally valid, but I prefer it because it's slightly more condensed. So this time we combine the instance with the type information. Because it's a new event emitter, Angular already knows that the type of outgoing data is going to be an event emitter. That's implied by the expression, and we just add the typing for the value that actually gets emitted to the part where we initialize the new instance. Like I say that's equally valid but it's a bit shorter so it's generally prefered. So both of these properties won't do anything at the moment they require things in the template. We haven't really focused much on templates yet, so I just wanted to introduce some of these decorators as they're very commonly used. When we do look at templates in the next section, we will look at both of these types of decorator in more detail. So in this lesson, we've had a quick overview of decorators and reviewed some of the fundamental ones that we looked at briefly earlier in the course, such as NG module and component. We also looked at the commonly used property decorators, inputs and outputs. And, just saw some basic examples of how they're used in a component class, thanks for watching.