Defining Metadata with a Decorator in Angular

In order to configure a class’ anticipated behavior, metadata is used to adorn the class. Decorators represent the metadata.

Metadata about a class, function, or property is what Angular decorators are for. When you configure a component, you are giving that component’s class metadata that informs Angular that the component has a particular configuration. Each decorator has a default setting at the base level. The default configuration is supplied when the decorator is built using the appropriate factory.

In Angular, decorators come in four different categories:

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

Class Decorators

The highest level decorators, known as class decorators, are used to specify the functions of the classes. They let Angular know that a specific class is a component or module. For instance:  e.g. @Component and @NgModule

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

@Component({
  selector: 'my-component',
  template: '<div>Class decorator</div>',
})
export class MyComponent {
  constructor() {
    console.log('Hey I am a component!');
  }
}

@NgModule({
  imports: [],
  declarations: [],
})
export class MyModule {
  constructor() {
    console.log('Hey I am a module!');
  }
}

Property Decorators

The particular properties within the classes are decorated using property decorators. Check out @Input (). Consider a class property for which you want to implement input binding. Without decorators, you would need to declare this property in your class so that TypeScript is aware of it. You would then need to notify Angular that you have a property that you want to be an input somewhere else.
Simply place the @Input() decorator above the property using decorators, and Angular’s compiler will generate an input binding from the property name and link the two together.

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

@Component({
    selector: 'my-component',
    template: '<div>Property decorator</div>'
})

export class MyComponent {
    @Input()
    title: string;
}

Method Decorators

A method decorator adds functionality to particular methods in your class. This is declared right before the declaration of a method.
This is well illustrated by @HostListener. This instructs Angular that you want the decorated method to be called along with any events that occur on your host.

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

@Component({
    selector: 'my-component',
    template: '<div>Method decorator</div>'
})
export class MyComponent {
    @HostListener('click', ['$event'])
    onHostClick(event: Event) {
        // clicked, `event` available
    }
}

Parameter Decorators

You can decorate arguments in the constructors of your class by using parameter decorators. For instance, @Inject. It instructs Angular as to how you desire that parameter to be started.

import { Component, Inject } from '@angular/core';
import { MyService } from './my-service';

@Component({
    selector: 'my-component',
    template: '<div>Parameter decorator</div>'
})
export class MyComponent {
    constructor(@Inject(MyService) myService) {
        console.log(myService); // MyService
    }
}

I hope you will like the content and it will help you to learn Defining Metadata with a Decorator in Angular.
If you like this content, do share.