Differences Between Annotation And Decorator In Angular

Although Annotations and Decorators have the same @ sign in Angular, they are distinct language capabilities.

Annotations :

These are linguistic features that are hard-coded. Annotations are merely metadata that is placed on a class to represent the metadata library.

Features of Annotations:

• They are used by the traceur compiler.
• Annotations are quite difficult to code.
• The reflect metadata library is used by the Annotations class.

Example:

import { 
  ComponentAnnotation as Component,
} from '@angular/core';
  
  
  
export class ComponentAnnotation extends DirectiveMetadata {
  
  constructor() {
    
  }
}

Decorators :

A decorator adds metadata to a class, its members, or method parameters. A decorator is nothing more than a function that allows you to access the target that has to be decorated.

Features of Decorators:

• The typescript compiler uses them.
• Decorators are not hard-coded.
• they correspond to a function called on the class.

Types of Decorators :

• @Component and @NgModule are examples of class decorators
• Property decorators such as @Input and @Output
• Method decorators such as @HostListener
• parameter decorators such as @Injectable

Example:

import { Component } from '@angular/core';
  
@Component({
  selector: 'hi',
  template: '<div>visioninfotech</div>',
})
export class test{
  constructor() {
    console.log('visioninfotech');
  }
}

Conclusion:

In AngularJS, there is a big distinction between annotations and decorators. Angular supports both Decorators and Annotations. Because Angular2 switched from AtScript to TypeScript, this is a legacy issue. In AngularJs, decorators are the default, but you can also use annotations.