'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 |
|---|
