Angular - Custom method decorator which triggers console.log() at the beginning and end of a method

Question

I would like to know if it is possible to create a custom decorator in Angular which when applied to a method can achieve the following functionality:

1. console log at the beginning of a method
2. console log at the end of a method

Example:

Without Decorator:

getRelationshipSource() {
  console.log('Entering getRelationshipSource method');
  this.referenceDataService.getRefData('RLNSHPSC').subscribe(res => {
    this.relationshipSource$.next(res);
  });
  console.log('Leaving getRelationshipSource method');
}

With Decorator

@LogMethod()
getRelationshipSource() {
  this.referenceDataService.getRefData('RLNSHPSC').subscribe(res => {
    this.relationshipSource$.next(res);
  });
}

Answer 1

A method decorator does exactly what you want to do. It intercepts the call of the decorated method. So you are able to log before and after the call of the decorated method.

log.decorator.ts

export function log( ) : MethodDecorator {
  return function(target: Function, key: string, descriptor: any) {

    const originalMethod = descriptor.value; 

    descriptor.value =  function (...args: any[]) {

      console.log(`Entering ${key} method`);
      const result = originalMethod.apply(this, args);
      console.log(`Leaving ${key} method` );

      return result;
    }

    return descriptor;
  }
}

In this SAMPLE APP I used it in the HelloComponent.

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

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  @Input() name: string;

  @log()
  ngOnInit() {
    this.Add(10, 32);
  }

  @log()
  private Add(a: number, b: number) : number {
    return a +  b;
  }
}

The console output looks like:

Entering ngOnInit method
Entering Add method
Leaving Add method
Leaving ngOnInit method