Skip to content
Related Articles

Related Articles

What are the differences between an Annotation and a Decorator in Angular?
  • Last Updated : 10 May, 2020
GeeksforGeeks - Summer Carnival Banner

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.




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:




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

Differences between Annotation and Decorator:

AnnotationDecorator
Used by Traceur compilerUsed 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-codedThey 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.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :