Custom Decorators & Metadata Reflection in Angular

Custom Decorators & Metadata Reflection in Angular

In Angular and TypeScript, decorators provide a way to add annotations or modify classes, properties, methods, and accessors. They are a special kind of declaration prefixed by an @ symbol. Coupled with Metadata Reflection, you can retrieve metadata information about the decorated elements.

1. Understanding Decorators:

Decorators are functions that can be used to modify classes, methods, accessors, properties, or parameters. TypeScript offers:

• Class Decorators, e.g., @Component, @NgModule
• Property Decorators, e.g., @Input, @Output
• Method Decorators and Accessor Decorators
• Parameter Decorators, e.g., @Inject

2. Creating a Custom Decorator:

Example of a Class Decorator:

function LogClass(target: Function) {
  console.log(`Class: ${target.name} was decorated!`);
}

@LogClass
class MyClass { }

When MyClass is defined, the message is logged to the console.

3. Metadata Reflection:

Reflection is a mechanism to inspect the structure and metadata of objects at runtime. With the help of the reflect-metadata library, decorators can be paired with metadata information, allowing you to introspect and get details about your classes and members.

Setting up:

1. Install reflect-metadata:

   Copy Code

   npm install reflect-metadata

2. Import it in your app's entry point (e.g., polyfills.ts):

   Copy Code

   import 'reflect-metadata';

4. Using Reflection with Decorators:

Suppose we want to attach and then retrieve some metadata from a method:

import 'reflect-metadata';

const META_KEY = 'custom:meta';

function AttachMetadata() {
  return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
    Reflect.defineMetadata(META_KEY, 'Custom Metadata Value', target, propertyKey);
  };
}

class DemoClass {
  @AttachMetadata()
  myMethod() {}
}

const metadataValue = Reflect.getMetadata(META_KEY, DemoClass.prototype, 'myMethod');
console.log(metadataValue);  // Outputs: Custom Metadata Value

Conclusion:

Custom decorators paired with metadata reflection provide a powerful mechanism to annotate, modify, and introspect classes and members in Angular and TypeScript. They lay the foundation for many of Angular's core features, and understanding them can open doors to advanced patterns and techniques in application development.