Decorators and its type in Angular: A Comprehensive Guide

Decorators are a powerful feature in Angular that allows developers to enhance and modify classes and class members, including components, directives, services, and more. They help you keep your codebase clean, maintainable, and extensible by providing a way to add metadata and behavior to your Angular components and services. In this blog, we’ll explore decorators in Angular, their types, and provide examples of how they effectively use them.

Understanding Decorators in Angular

In Angular, decorators are functions that apply to classes, class properties, and class methods using the @ symbol followed by the decorator name. Decorators provide metadata and functionality to these entities without modifying their original code. The core idea is to separate concerns and responsibilities in your application by encapsulating specific functionality within decorators.

Angular comes with a set of built-in decorators, and you can also create custom decorators to suit your specific needs. Let’s dive into the different types of decorators in Angular and explore them with examples.

Types of Decorators in Angular

1. Class Decorators

Developers apply class decorators to classes in order to enhance or modify the class itself. Some common class decorators in Angular include @Component, @Directive, and @Injectable. Let’s look at an example using the @Component decorator:

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

@Component({
  selector: 'app-example',
  template: '<p>Example Component</p>',
})
export class ExampleComponent {
  // Class properties and methods
}

In this example, the @Component decorator is applied to the ExampleComponent class to define its metadata, such as the component’s selector and template.

2. Property Decorators

Developers apply property decorators to class properties to enhance or modify those properties. A common example is the @Input decorator, which allows you to bind data to a component property from its parent component:

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

@Component({
  selector: 'app-child',
  template: '<p>{{ message }}</p>',
})
export class ChildComponent {
  @Input() message: string;
}

In this example, the @Input decorator is applied to the message property of the ChildComponent, making it an input property that can be bound to a parent component’s property.

3. Method Decorators

You can apply method decorators to class methods, enabling you to modify the behavior of those methods. A common example is the @HostListener decorator, which lets you listen for events on an element:

import { Component, HostListener } from ‘@angular/core’;

@Component({
selector: ‘app-listener’,
template: ‘Click me’,
})
export class ListenerComponent {
@HostListener(‘click’, [‘$event’])
onClick(event: Event): void {
console.log(‘Button clicked’);
}
}

In this example, the @HostListener decorator is applied to the onClick method, enabling it to listen for the ‘click’ event on the button element.

4. Parameter Decorators

Developers use parameter decorators to modify class constructor parameters. While they are less commonly used, a popular example is the @Inject decorator, which allows you to specify the dependencies to be injected into a class constructor:

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

class ExampleService {
  constructor(@Inject('API_URL') private apiUrl: string) {
    // ...
  }
}

In this example, the @Inject decorator is applied to the apiUrl parameter, specifying that it should be injected with the value associated with the ‘API_URL’ token.

Creating Custom Decorators

you can also create custom decorators to enhance your classes with application-specific functionality. The process of creating custom decorators includes defining a function that takes the target, property key, and descriptor as arguments and returns a modified descriptor. You can then utilize these custom decorators in a way similar to the built-in decorators.

function MyCustomDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  // Modify the behavior of the class or method here
  // ...
}

class MyClass {
  @MyCustomDecorator
  myMethod() {
    // Method implementation
  }
}

Conclusion

Decorators are a vital aspect of Angular that empowers developers to enhance and modify classes, class properties, and methods. They help in maintaining clean and extensible code by separating concerns and responsibilities. Understanding and effectively using decorators in Angular can greatly improve the structure and maintainability of your application.

In this blog, we explored the different types of decorators in Angular, including class, property, method, and parameter decorators, along with examples of how to use them. Custom decorators allow you to add your own application-specific functionality, making them a versatile tool for Angular developers. By mastering decorators, you can make your Angular applications more organized and robust.

For more such posts, please follow our LinkedIn page- FrontEnd Competency.