What is method decorator in angular - amresh087/newronaRepos GitHub Wiki

In Angular, method decorators are used to modify the behavior of methods in a class. These decorators can be particularly useful for handling events, injecting dependencies, or adding custom functionality. Here are some common method decorators used in Angular

@HostListener(): This decorator is used to listen to events on the host element of a directive or component. It allows you to respond to user interactions or other events.

   import { Directive, HostListener } from '@angular/core';

   @Directive({
     selector: '[appClickTracker]'
   })
   export class ClickTrackerDirective {
     @HostListener('click', ['$event'])
     onClick(event: Event) {
       console.log('Element clicked:', event);
     }
   }

@HostBinding(): Although typically used as a property decorator, it can be used in conjunction with methods to dynamically bind properties to host element attributes.

   import { Directive, HostBinding } from '@angular/core';

   @Directive({
     selector: '[appHighlight]'
   })
   export class HighlightDirective {
     private isHighlighted = false;

     @HostBinding('class.highlighted') get highlighted() {
       return this.isHighlighted;
     }

     toggleHighlight() {
       this.isHighlighted = !this.isHighlighted;
     }
   }

@Inject(): This decorator is often used as a parameter decorator to inject dependencies, but can also be used with methods in advanced scenarios.

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

   @Injectable({
     providedIn: 'root'
   })
   export class MyService {
     constructor(@Inject('SomeDependency') private dependency: any) {}
   }

@Pipe(): While primarily used as a class decorator for defining pipes, method decorators can be used within pipes to define transformation logic.

   import { Pipe, PipeTransform } from '@angular/core';

   @Pipe({
     name: 'exponentialStrength'
   })
   export class ExponentialStrengthPipe implements PipeTransform {
     @TransformMethod()
     transform(value: number, exponent: string): number {
       let exp = parseFloat(exponent);
       return Math.pow(value, isNaN(exp) ? 1 : exp);
     }
   }

   // Custom Method Decorator
   function TransformMethod() {
     return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
       // Custom behavior here
     };
   }

While Angular itself doesn't provide many method decorators out-of-the-box beyond @HostListener, developers can create custom method decorators to add specific behavior or functionality to methods. Here is an example of creating a custom method decorator:

Creating a Custom Method Decorator

Custom method decorators can be used to add specific behavior or functionality to methods. Here's an example of how to create and use a custom method decorator:

   // Custom Log decorator definition
   function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
     const originalMethod = descriptor.value;

     descriptor.value = function (...args: any[]) {
       console.log(`Calling ${propertyKey} with arguments:`, args);
       const result = originalMethod.apply(this, args);
       console.log(`Result from ${propertyKey}:`, result);
       return result;
     };

     return descriptor;
   }

   // Example service using the custom Log decorator
   import { Injectable } from '@angular/core';

   @Injectable({
     providedIn: 'root',
   })
   export class CalculationService {
     @Log
     multiply(a: number, b: number): number {
       return a * b;
     }
   }

   // Using the service
   import { Component } from '@angular/core';
   import { CalculationService } from './calculation.service';

   @Component({
     selector: 'app-root',
     template: `<h1>Check the console for decorator logs</h1>`,
   })
   export class AppComponent {
     constructor(private calculationService: CalculationService) {
       this.calculationService.multiply(2, 3);
     }
   }
⚠️ **GitHub.com Fallback** ⚠️