'Angular overload component's property with getter and setter with decorator

How override a getter and a setter on object and add some logic but continue to call original methods?

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

function defineDecorator() {
  return function (target: object, propertyKey: string) {
    console.log('decorate', target, propertyKey);
    const descriptor = Object.getOwnPropertyDescriptor(target, propertyKey);
    const originalSet = descriptor && descriptor.set ? descriptor.set : null;
    const originalGet = descriptor && descriptor.get ? descriptor.get : null;

    Object.defineProperty(target, propertyKey, {
      get: function (): any {
        console.log('overload getter called');
        if (originalGet) {
          originalGet.call(this);
        }
        return 'test';
      },
      set: function (value: any) {
        console.log('overload setter called');
        if (originalSet) {
          originalSet.call(this, value);
        }
      },
      enumerable: true,
      configurable: true,
    });
  };
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  _foo: string;

  @defineDecorator()
  set foo(value: string) {
    console.log('original setter called');
    this._foo = value;
  }
  get foo() {
    console.log('original getter called');
    return this._foo;
  }

  ngOnInit(): void {
    this.foo = 'bar';
  }
}

demo online https://stackblitz.com/edit/angular-ivy-qj1p7a?file=src%2Fapp%2Fapp.component.ts



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source