Decorator in Depth Knowledge

 Decorators are a core concept when developing with Angular versions 2 and above. 

decorators aren’t native to JavaScript just yet - TypeScript currently provides the functionality for us. 

There are two types of decorator.

1. BuiltIn Decorator

2. Custom Decorator

BuiltIn Decorator :  There are four main types of BuiltIn Decorator

       i. class  // @Component, @NgModule

       ii. property // used for properties inside classes @Input and @Output

       iii. method  // used for method inside classes, e.g. @HostListener

        iv. parameter  // for parameters inside class constructors   @Inject 

NOTE 1. class Decorator are use to express intent for classes.

NOTE 2. property decorator is an extremely powerful mechanism  which allow us to decorate specific properties within our classes.

What is the actual code?, that Angular uses to create @component decorators because we only need to understand them on a higher level.

how are Decorators actually applied to a class?

@ConsoleGroup('MyClass')

class MyClass {

    constructor() {

      console.log('ES6 class!');

    }

  }   

TypeScript will convert ES6 class over to a function like this ---

  var MyClass = (function() {

    function MyClass() {

      console.log('Yo!');

    }

    return MyClass;

  })();

MyClass = __decorate([ConsoleGroup('MyClass')], MyClass);

This gives us some actual context as to how our decorators are applied.

Chaining decorators

If a decorator is used on a class for the first time, it creates a new array and pushes the annotation instance into it. If this isn’t the first decorator that has been used on the class, it pushes it into the existing annotation array. This allows decorators to be chained together and all stored in one place.

For example, in Angular you could do this for a property inside a class:

export class TestComponent {
  @Input()
  @HostListener('click', ['$event'])
  onClick: Function;
}
An annotation instance is created when you use a decorator. 
This merges the default configuration for that decorator (for instance the object you see above) with the configuration that you have specified, for example:

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

@Component({

  selector:'example-component',

  templateUrl: '<div>Woo a component!</div>',

  styleUrls: ['example.component.scss']

})

export class ExampleComponent {

  title = 'tsProj';

constructor() { console.log('Hey I am a component!'); }

}

Would create an annotation instance with the properties of:

{

  selector: 'example-component',

  inputs: undefined,

  outputs: undefined,

  host: undefined,

  exportAs: undefined,

  moduleId: undefined,

  providers: undefined,

  viewProviders: undefined,

  changeDetection: ChangeDetectionStrategy.Default,

  queries: undefined,

  templateUrl: undefined,

  template: '<div>Woo a component!</div>',

  styleUrls: ['example.component.scss'],

  styles: undefined,

  animations: undefined,

  encapsulation: undefined,

  interpolation: undefined,

  entryComponents: undefined

}

Once this annotation instance has been created it is then stored so Angular can access it.

Why Storing metadata ?

"decorator is used to store metadata about a class, method or property"

for example,

When you configure a component, you are just proving metadata for that class. 

metadata tells Angular, I am  a component and I have specific configuration.

Each decorator has some default base configuration, we can also add new configuration.

When the decorator is created using the relevant factory, the default configuration is passed through. for instance, let's take a look at the possible configuration that you can use when creating a component.

{

  selector: undefined,

  inputs: undefined,

  outputs: undefined,

  host: undefined,

  exportAs: undefined,

  moduleId: undefined,

  providers: undefined,

  viewProviders: undefined,

  changeDetection: ChangeDetectionStrategy.Default,

  queries: undefined,

  templateUrl: undefined,

  template: undefined,

  styleUrls: undefined,

  styles: undefined,

  animations: undefined,

  encapsulation: undefined,

  interpolation: undefined,

  entryComponents: undefined

}

While storing metadata,  An annotation instance is created when you use a decorator. This merges the default configuration for that decorator (for instance the object you see above)

 

changeDetection: ChangeDetectionStrategy.OnPush;

Decorator shares the  core functionality by using a factory for each type of decorator you have been viewed above.

Thanks you !