Decorators in Angular
Class Decorators
Angular offers us a few class decorators. These are the top-level decorators that we use to express intent for classes. They allow us to tell Angular that a particular class is a component, or module, for example. And the decorator allows us to define this intent without having to actually put any code inside the class.
A @Component:
Are decorators that mark a class as an Angular component and provide configuration metadata that determines how the component should be processed, instantiated, and used at runtime.
and @NgModule:
Are decorator that mark a class as an NgModule and supplies configuration metadata.
Here are the decorators example with classes:
Notice how both classes by themselves are effectively the same. No code is needed within the class to tell Angular that it is a component or a module. All we need to do is decorate it, and Angular will do the rest.
Property Decorators
These are probably the second most common decorators that you’ll come across. They allow us to decorate specific properties within our classes — an extremely powerful mechanism.
Let’s take a look at @Input():
Are decorators that mark a class field as an input property and supplies configuration metadata. The input property is bound to a DOM property in the template. During change detection, Angular automatically updates the data property with the DOM property’s value.
Imagine that we have a property within our class that we want to be an input binding.
Without decorators, we’d have to define this property in our class anyway for TypeScript to know about it, and then somewhere else tell Angular that we’ve got a property that we want to be an input.
With decorators, we can simply put the @Input():
Are decorators that mark a class field as an output property and supplies configuration metadata. The DOM property bound to the output property is automatically updated during change detection.
They are decorators that are above the property — which Angular’s compiler will automatically create an input binding from the property name and link them.
We’d then pass the input binding via a component property binding:
The property decorator and “magic” happens within the ExampleComponent definition. Here, with the <example-component> tag there is a single property exampleProperty which is decorated, which is easy to change, maintain and track as our code base grows. You can call your <example-component> tag on any component and can use it as a template.
Method Decorators
@HostListener:
Are decorator that declares a DOM event to listen for, and provides a handler method to run when that event occurs.
Method decorators are very similar to property decorators but are used for methods instead. This let’s us decorate specific methods within our class with functionality. A good example of this is @HostListener. This allows us to tell Angular that when an event on our host happens, we want the decorated method to be called with the event.
Parameter Decorators
Parameter decorators are quite interesting. You may have come across these when injecting primitives into a constructor, where you need to manually tell Angular to inject a particular provider.
Parameter decorators allow us to decorate parameters in our class constructors.
Due to the metadata that TypeScript exposes for us we don’t actually have to do this for our providers:
constructor(@Inject(MyService) myService) {
console.log(myService); // MyService
}We can just allow TypeScript and Angular to do the hard work for us by specifying the provider to be injected as the parameter type:
Now that we’ve covered the types of decorators we can use, let’s dig into what they actually are doing — and why we need them.
