Angular Decorators

We use Angular Decorators at many places in our Angular App. We use it to decorate components, directives, Angular Modules, etc. In this article, let us learn what is Angular Decorator and a list of Decorators that Angular Supports.

Angular Decorators

An Angular Decorator is a function, using which we attach metadata to a class, method, accessor, property, or parameter. We apply the decorator using the form @expression, where expression is the name of the decorator.

The Decorators are Typescript features and still not part of the Javascript. It is still in the Proposal stage.

To enable Angular Decorators, we need to add the experimentalDecorators to the tsconfig.json file. The ng new command automatically adds this for us.

Creating a new Decorator in Angular

The following code shows how to create a Decorator in Angular. You can refer StackBlitz for the complete code.

The simpleDecorator decorates the AppComponent class. It does not take any arguments.

As we said earlier, the decorator is a function. It gets the target, as the argument, which is nothing but the AppComponent

Inside the function, we add two custom properties value1 & value2 to our AppComponent.

Now, we can use it to Decorate our AppComponent

Inside the component, we can access the new properties

Decorator with Arguments

To Create a Decorator with arguments, we need to create a factory function, which returns the Decorator function. You can refer to the StackBlitz

The simpleDecorator takes the args as argument and returns the decorator function. The rest of the code is as same as above, except we use the args to populate the properties.

We apply the simpleDecorator on the component as below

List of All Angular Decorators

The following is a complete list of Decorators in Angular.

  1. @NgModule
  2. @Component
  3. @Injectable
  4. @Directive
  5. @Pipe
  6. @Input
  7. @Output
  8. @Host
  9. @HostBinding
  10. @HostListener
  11. @ContentChild
  12. @ContentChildren
  13. @ViewChild
  14. @ViewChildren
  15. @Inject
  16. @Self
  17. @SkipSelf
  18. @Optional

We can classify them under four different categories

  1. Class decorators.
  2. Property decorators
  3. Method decorators
  4. Parameter decorators

Class decorators

We apply class decorators to classes. @NgModule, @Component, @Injectable, @Directive & @Pipe are Class Decorators in Angular

@NgModule

@NgModule Decorator defines the class as Angular Module and adds the required metadata to it.

@Component

The Angular recognizes the class as Angular Component only if we decorate it with the @Component Decorator.

@Injectable

Injectable decorator has two purposes.

One it instructs the Angular that this class needs a dependency. The Angular compiler will generate the necessary metadata to create the class’s dependencies

Second, using the providedIn we inform the Dependency Injection system how to provide the service.

@Directive

@Directive Decorator marks a class as an Angular directive. The directives help us to change the appearance, behavior, or layout of a DOM element.

@Pipe

Decorator that marks a class as Angular Pipe and supplies configuration metadata.

Property Decorators

Property Decorators are applied to the properties of the class.

@Input

Input decorator marks the property as the input property. I.e it can receive data from the parent component. The parent component uses the property binding to bind it to a component property. Whenever the value in the parent component changes angular updates the value in the child component.

@Output

Output decorates the property as the output property. We initialize it as an EventEmitter. The child component raises the event and passes the data as the argument to the event. The parent component listens to events using event binding and reads the data.

@ContentChild & @ContentChildren

The ContentChild & ContentChildren are decorators, which we use to Query and get the reference to the Projected Content in the DOM. Projected content is the content that this component receives from a parent component.

@ViewChild & @ViewChildren

The ViewChild or ViewChildren decorators are used to Query and get the reference of the DOM element in the Component. ViewChild returns the first matching element and ViewChildren returns all the matching elements as QueryList of items. We can use these references to manipulate element properties in the component.

@HostBinding

The HostBinding allows us to bind to a property of the host element. The host is an element on which we attach our component or directive. This feature allows us to manipulate the host styles

Method decorators

Method Decorators are applied to the methods of the class.

@HostListener

The HostListener listens to host events. The host is an element on which we attach our component or directive. Using HostListener we can respond whenever the user performs some action on the host element.

Parameter decorators

Parameter Decorators are applied to the constructor parameter of the class.

@Inject

The @Inject() is a constructor parameter decorator, which tells angular to Inject the parameter with the dependency provided in the given token. It is a manual way of injecting the dependency

@Host

The @host is a Parameter decorator that tells the DI framework to resolve the dependency in the view by checking injectors of child elements, and stop when reaching the host element of the current component.

@Self

The @Self decorator instructs Angular to look for the dependency only in the local injector. The local injector is the injector that is part of the current component or directive.

@SkipSelf

The @SkipSelf decorator instructs Angular to look for the dependency in the Parent Injector and upwards.

@Optional

@Optional marks the dependency as Optional. If the dependency is not found, then it returns null instead of throwing an error

Custom Decorators

You can also build your own custom decorators. You can refer to these articles.

  1. Inspiration for Custom Decorators in Angular
  2. Custom Decorators in Angular

Reference

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top