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: This 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.