What Are Decorators in Angular and How Do They Work?

Decorators in Angular play a crucial role in the framework’s architecture, enabling Angular to efficiently manage components, services, and other core elements of an application. In Angular, decorators are special types of functions prefixed with the @ symbol, which are used to attach metadata to a class, property, method, or parameter. This metadata provides Angular with the necessary information to know how to handle and process these elements at compile-time and run-time.

In this detailed guide, we’ll explore what Angular decorators are, how they function, and specifically, how metadata is stored and used by Angular during the execution of an application.

What Are Decorators in Angular?

A decorator is a function that modifies or adds metadata to a class, method, property, or parameter. In Angular, decorators are used extensively to define how components, services, directives, modules, and other entities should behave within the framework.

In simpler terms, decorators are a way to add extra information to a class, such as a component’s template, its styles, or a service’s injectable properties.

Types of Angular Decorators

Angular provides several types of decorators, each serving a distinct role in defining the functionality and metadata of Angular entities.

1. Class Decorators: These decorators define the main behavior of Angular classes.
   • @Component: Defines an Angular component. It tells Angular that the class is a component and provides metadata like the template URL, styles, and selector.
   • @Directive: Marks a class as a directive, allowing it to modify the behavior of DOM elements.
   • @Injectable: Specifies that a class is a service that can be injected into other components or services.
   • @NgModule: Defines a module that groups together related components, services, and other Angular entities.
   • @Pipe: Marks a class as a pipe, which is used for transforming data in Angular templates.
2. Property Decorators: These decorators are used to modify properties of a class.
   • @Input: Marks a property as an input to allow data binding from a parent component.
   • @Output: Marks a property as an output to emit events from the child component to the parent.
   • @ViewChild, @ViewChildren: Provides access to child components or DOM elements.
   • @ContentChild, @ContentChildren: Provides access to projected content inside the component.
   • @HostBinding: Binds properties to the host element of the component.
3. Method Decorators: These decorators are used for modifying methods of the class.
   • @HostListener: Binds an event listener to the host element of a component.
4. Parameter Decorators: These decorators modify the behavior of parameters.
   • @Inject: Specifies that a parameter should be injected with a specific dependency.
   • @Optional: Marks a dependency as optional.
   • @Self, @SkipSelf, @Host: Control the injector hierarchy and the scope of dependency injection.

How Do Decorators Work in Angular?

In Angular, decorators serve as a mechanism for adding metadata to classes, methods, and properties. This metadata describes how Angular should handle the decorated entity (e.g., how to treat a class as a component, inject dependencies, or bind event listeners).

Here’s how decorators work in Angular:

1. Decorator Function is Invoked: When Angular encounters a class or property with a decorator (e.g., @Component, @Injectable), Angular invokes the decorator function. The class or method being decorated is passed as an argument to this function.
2. Metadata is Attached: The decorator function attaches metadata to the class or property. This metadata is information that Angular uses to determine how to process the decorated entity. For example, the @Component decorator attaches metadata about the component’s selector, template, and styles.
3. Transformation of the Class or Property: After attaching the metadata, Angular might transform the class or property. For example, when a class is decorated with @Component, Angular sets up the component’s template, binds data to it, and prepares it for rendering.
4. Storing Metadata: The metadata is stored internally in Angular’s reflection system, which allows Angular to retrieve and use this data at runtime. The metadata helps Angular manage aspects such as dependency injection, component lifecycle, and change detection.

What Happens Under the Hood When We Decorate a Class?

When a class is decorated in Angular, several things happen under the hood, starting with the invocation of the decorator function. Let’s break down the process:

1. Decorator Invocation:
   • Angular invokes the decorator function (such as @Component) and passes the target class as an argument.
   • This is essentially the class definition itself (e.g., ExampleComponent).
2. Metadata Attachment:
   • The decorator function attaches metadata to the class.
   • For example, with @Component, the metadata might include the selector, templateUrl, and styleUrls.
   • This metadata helps Angular know how to treat the class (e.g., as a component with a template).
3. Class Transformation:
   • Based on the metadata, Angular transforms the class.
   • For example, the @Component decorator tells Angular that this class should be treated as a component. Angular will link the component’s template and style to the class.
   • Angular might also inject any dependencies the class requires (e.g., services) based on the metadata.
4. Metadata Storage:
   • The metadata is stored in Angular’s internal reflection system, usually in a metadata registry that Angular uses during the compilation and runtime phases.
   • Angular uses the Reflect API (with the reflect-metadata package) to attach metadata to the class. This allows Angular to dynamically access metadata during the execution of the application.
5. Registration and Compilation:
   • Angular registers the component in the module’s metadata.
   • The metadata, including the template and styles, is compiled into the application.
6. Instantiation and Rendering:
   • At runtime, Angular instantiates the decorated class, applies its template, and renders it. The Angular change detection system is used to manage updates to the component’s view.

Where Is Metadata Stored?

Angular uses a reflection system to store metadata. The metadata is not directly added as properties to the class, but rather, it is stored in an internal data structure that Angular can access. The key points to understand are:

• Not stored inside the class itself: The metadata is not stored as new properties of the class, such as class.metadata = {...}.
• Stored in Angular’s reflection system: The metadata is stored in Angular’s internal system, which is powered by the Reflect API from the reflect-metadata library.
• Global Registry: The metadata is stored in a global registry or in the prototype of the class, which allows Angular to efficiently retrieve it during the compilation and runtime phases.

For example, when you decorate a class with @Component, the metadata might look like this:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

This metadata (selector, template, styles) is stored in a metadata storage that Angular’s compiler and runtime system can access.

Accessing Metadata at Runtime

While Angular typically handles metadata internally, developers can also access the metadata for advanced use cases, such as building custom decorators or inspecting how Angular is processing certain classes.

Here’s an example of how to access metadata at runtime:

import 'reflect-metadata';
import { Component } from '@angular/core';

function LogMetadata(target: Function) {
  const metadata = Reflect.getMetadata('annotations', target);
  console.log(metadata);  // Logs the metadata for the @Component decorator
}

@LogMetadata
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

In this code:

• The @Component decorator attaches metadata to the AppComponent class.
• The LogMetadata function uses Reflect.getMetadata to retrieve the metadata associated with AppComponent.
• The metadata includes details like the component’s selector, template, and style.

Conclusion

Decorators are a powerful and integral part of Angular. They allow Angular to attach essential metadata to classes, properties, and methods, which is used to manage the component lifecycle, dependency injection, routing, and much more.

• How decorators work: Decorators add metadata to classes, which Angular uses to configure how to treat those classes (e.g., as components or services).
• Where metadata is stored: Metadata is not stored inside the class itself, but in Angular’s internal reflection system, powered by the reflect-metadata library.
• How Angular reads the metadata: Angular uses this metadata to instantiate components, handle dependency injection, and manage change detection and rendering.