What are the differences between an Annotation and a Decorator in Angular?

Although Annotations and Decorators both share the same @ symbol in Angular, they both are different language features. Annotations: These are hard-coded language feature. Annotations are only metadata set on the class that is used to reflect the metadata library. When user annotates a class, the compiler creates an attribute on that class called annotations, stores an annotation array in it, then tries to instantiate an object with the same name as the annotation, passing the metadata into the constructor. Annotations are not predefined in AngularJs so we can name them on our own.

• Example:

  @ComponentAnnotation

Features of Annotations:

• Annotations are hard-coded.
• Annotations are used by AtScript and Traceur compiler.
• Annotations reflect metadata library

Note: Nowadays AngularJs switched from AtScript to TypeScript but Annotations are supported these days also. Example: Here component is annotated as ComponentAnnotation and further used. javascript

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



export class ComponentAnnotation extends DirectiveMetadata {

  constructor() {
  
  }
}

Decorators: A decorator is a function that adds metadata to a class, its members, or its method arguments. A decorator is just a function that gives you access to the target that needs to be decorated. There are four type of decorators all of them arem mentioned below: Types of Decorators:

• Class decorators like @Component, @NgModule
• Property decorators like @Input and @Output
• Method decorators like @HostListener
• Parameter decorators like @Injectable

Features of Decorators:

• Decorators are predefined in AngularJs.
• Decorators are used by TypeScript compiler.
• Decorators are used to attach metadata to a class,objects and method.

Example: javascript

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

@Component({
  selector: 'hi',
  template: '<div>GeeksForGeeks</div>',
})
export class Geeks{
  constructor() {
    console.log('GeeksForGeeks');
  }
}

Differences between Annotation and Decorator:

Annotation	Decorator
Used by Traceur compiler	Used by Typescript compiler
Annotations are only metadata set on the class using the Reflect Metadata library.	Decorator corresponds to a function that is called on the class.
Annotations are used for creating an attribute annotations that stores array.	Decorator is a function that gets the object that needs to be decorated.
They are Hard-coded	They are not Hard-coded
Exp. Imports for Annotations: import {ComponentAnnotation as Component} from '@angular/core';	Exp. Imports for Decorators: import {Component} from '@angular/core';

Conclusion:There is a very significant difference between Annotations and Decorators in AngularJS. Both Decorators and Annotations are supported by Angular. This is a legacy thing because Angular2 swapped from AtScript to TypeScript. Decorators are the default in AngularJs but you can use Annotations too.