Ajay Prakash Nair
Ajay Prakash Nair's Blog

Ajay Prakash Nair's Blog

Angular Decorators

Angular Decorators

Ajay Prakash Nair's photo
Ajay Prakash Nair
·Oct 16, 2021·

4 min read

Subscribe to my newsletter and never miss my upcoming articles

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.

They allow a service, directive, or filter to be changed before being used. Basically, a decorator provides configuration metadata that determines how the component, class, or a function should be processed, instantiated, and used at runtime.

There are four types of decorators and each type further has its own subset of decorators.

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. Among them, @Component and @NgModule are widely used.

The below code snippet uses @Component, which is a type of class decorator provided by Angular.

import { NgModule, Component } from '@angular/core';

@Component({
  selector: 'example-component',
  template: '<div>Woo a component!</div>',
})

The below code snippet uses @NgModule, which is a type of class decorator provided by Angular.

@NgModule({
  imports: [],
  declarations: [],
})

Property Decorators

Property decorators are used to decorate specific properties inside a class. Using a property decorator, we can easily identify why we use any particular property of a class Like @Input (), @Output, @ReadOnly (), @Override ().

export class ExampleComponent {
  @Input()
  exampleProperty: string;
}

Method Decorators Method decorators, as the name indicates, are used to decorate the method defined inside 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.

export class ExampleComponent {
  @HostListener('click', ['$event'])
  onHostClick(event: Event) {
    // clicked, `event` available
  }
}

Parameter Decorators

Parameter decorators allow us to decorate parameters in our class constructors. @Inject () is a common and widely used parameter decorator. Using this decorator, we can inject services in Angular classes.

export class ExampleComponent {
  constructor(@Inject(MyService) myService) {
    console.log(myService); 
  }
}

Structure of Decorators

In all the code snippets that we have seen so far on decorators, you must have noticed that each of the decorators follows a similar pattern or structure when used in code. Each decorator starts with @ symbol and is added before the class, method, property, or passed as a parameter. All are functions having open and close brackets. This helps us understand that it is the function that is used as an in-built decorator. Just like a function can be customized, decorators can also be customized.

Creating a decorator

It makes things a lot easier if we understand what a decorator is actually doing before we look into how Angular uses them under the hood. To do this, we can create a quick example decorator.

Decorator functions

Decorators are actually just functions, it’s as simple as that, and are called with whatever they are decorating. A method decorator will be called with the value of the method it’s decorating, and a class decorator will be called with the class to be decorated.

function Console(target) {
  console.log('Our decorated class', target);
}

Passing data to a decorator

When we use the decorators in Angular we pass in some form of configuration, specific to the decorator.

For example, when we use @Component we pass through an object, and with @HostListener we pass through a string as the first argument (the event name, such as 'click') and optionally an array of strings for further variables (such as $event) to be passed through to the decorated method.

@Console('Hey!')
class ExampleClass {
  constructor() {
    console.log('Yo!');
  }
}

Uses of Decorators in Real Time Applications

Almost all Angular applications use decorator concepts; as decorators are functions that allow a service, directive or filter to be modified prior to its usage.

@override, @deprecate, @autobind, @mixin are decorators which are widely used in real time applications. Angular framework has several of these kinds of examples which help to achieve complex features in applications.

We know now what Angular decorators are and how they work on class, property, methods and parameters to provide information about metadata.

All decorators work on a similar principle. We can apply some changes to the behaviour of the default functionality or we can add some custom tweaks to the code before the decorator can be applied to a class, property or method.

There are different ways to call decorators as these decorators can control start from the class implementation to the property and method implementation within the class.

Decorators are great when code needs to be customized to suit the needs of the clients and when in-built functions do not help us with what we need.

 
Share this