I'm currently working on a custom decorator that will execute decorated functions based on RxJS events.
Everything seems to be going well so far, but I'm facing an issue when the function is executed: the context of the this object is lost.
I've been searching for a solution for the past day without any luck.
If you want to check out the problem, you can view a stackblitz example here. The objective is to see "Angular" in the console, coming from this.name.
It appears that you are attempting to invoke a method on the instance of a decorated class within your decorator. However, it's important to note that class decorators operate differently. They are executed during the class definition process, not during instantiation. As a result, calling methods with instances of your class is not supported by class decorators.
You can access the updated stackblitz here. In this version, I have extended your class and invoked the method in the constructor of the extended class. This ensures that the method is called whenever objects of the decorated class are instantiated.
Give this code a try, it should function properly. Simply replace 'HelloWorld' with 'constructor'.
function Greetings(): ClassDecorator {
return function(constructor) {
constructor.prototype.Greetings.apply(new constructor(), null);
};
}
My unique way of explaining how context is conveyed in a method using map :)
return class extends constructor {
constructor(...args) {
super(...args);
if(constructor.processCallbackMap){
Array.from(constructor.processCallbackMap).map(([key, value]) = {
constructor.processCallbackMap.set(key, value.bind(this));
});
}
}
}
Check out this article for some custom decorator inspiration in Angular:
When you comment out the line below, your app will work fine:
constructor.prototype.HelloWord.apply(this, null);
The constructor.prototype is utilized to enable the use of ngOnInit, ngOnChanges, and more.
For example, the code snippet on the page shows how to create a function called NgLog:
import { environment } from "../environments/environment";
export function NgLog() : ClassDecorator {
return function ( constructor : any ) {
if( !environment.production ) {
// You can add/remove events for your needs
const LIFECYCLE_HOOKS = [
'ngOnInit',
'ngOnChanges',
'ngOnDestroy'
];
const component = constructor.name;
LIFECYCLE_HOOKS.forEach(hook => {
const original = constructor.prototype[hook];
constructor.prototype[hook] = function ( ...args ) {
console.log(`%c ${component} - ${hook}`, `color: #4CAF50; font-weight: bold`, ...args);
original && original.apply(this, args);
}
});
}
}
}
Here is an example of a JSON file: { "id": 5, "url": "http://localhost:8000/api/v1/users/5/", "username": "Najmuddin", "email": "", "groups": [ { "id": 1, "url ": "http://localhost:8000/api/v1/groups/1/", ...
I want to customize a component @Component({ selector: '[my-component]', template: `<i>1</i><p>content</p><b>2</b>` }) export class MyComponent { public tagName: string; } Then there's another comp ...
While working on my react application with vite, typescript, and mui, I encountered the following error: enter image description here This issue seems to be connected to material ui. Sometimes, deleting the 'deps' folder in '\node_mod ...
I've been attempting to incorporate custom error handling in Highcharts by utilizing the Highcharts.error function within my Angular 7 application, but it's resulting in an error. Highcharts.error = function (code: string): void { }; Error T ...
As a beginner in the field of mobile development, I am currently exploring NativeScript and encountering an error in my Android application. https://i.stack.imgur.com/BxLqb.png You can view my package.json here ...
I have a JS Fiddle showcasing a CSS chart. How can I integrate LESS into my current Angular 5 project to make use of this chart? Also, where should I place the JavaScript and references to the LESS file from this example within my Angular component? The li ...
Upon my initial visit to the website, I noticed that the font appeared distorted. https://i.sstatic.net/BtUxI.png However, when I right-clicked and chose "reload page", the fonts were displayed correctly. https://i.sstatic.net/3XUcA.png This issue seem ...
Is there a way to divide the URL below into components and extract only "store" from it? http://www.store.com/products.aspx/Books/The-happy-donkey If so, what would be the best method to achieve this? ...
I created a unique Angular theme called 'my-theme.scss' and added it to the angular.json file. While it works with most Angular Elements, I am facing issues getting it to apply to certain HTML Elements inside Angular Components. For example: < ...
Our team just launched a production app utilizing Ionic and Angular PWA. Regrettably, we forgot to set updatemode for assets *.js & *.html initially. We have now deployed an updated version of ngsw-config and ngsw.json that includes a method for asset ...
Within my component, I am attempting to dynamically provide the dimensions of my SVG viewBox by injecting them from my bootstrap in main.ts. import {Component} from 'angular2/core'; import {CircleComponent} from './circle.component'; i ...
So, I have a hidden div that I want to show on button click. And not only do I want to show it, but I also want to append another div to it. The show and hide functionality is working fine, but the appending part seems tricky when dealing with hidden eleme ...
Why is my application crashing even though I have included MatExpansionModule in my imports? Could there be an issue with @angular/material or did I make a mistake somewhere? I tried adding the module in app.module.ts as suggested on Github, but unfortun ...
This is the code snippet I am working with: signup(){ let customerData = { customer : {} } customerData.customer = { "email": this.newUser.email, "first_name": this.newUser.first_name, "last_name": this ...
Currently in the process of setting up Angular with npm: npm install @angular... Encountering an issue where the TypeScript source files are not included. I would like to have access to debug the code using the TypeScript source files (with source maps). ...
I am working on a TypeScript-React application generated using create-react-app. Deploying it to Heroku is proving to be a challenge as the process fails with an error message during installation and build: remote: Creating an optimized production b ...
I've organized my project's file structure as follows: app/ (contains all automatically built files) app-routing.module.ts components/ layout/ top/ side/ banner/ pages/ ...
I have a requirement to display two datasets as dual column charts. (2) [{…}, {…}] 0: historyDate: "2021-02-10T10:00:000Z" documentStatusHistory: CANCELLED: 6 COMPLETED: 52 IN_PROGRESS: 1 OPEN: 1 ...
I'm facing a common CORS issue in my application while trying to call an API. The API I am attempting to access can be found here: https://github.com/nickypangers/passport-visa-api Below is the code snippet used for making the API call: const getVi ...
Is there a way to efficiently replace or modify the outdated component prefix all at once? OR How can I create a dynamic prefix system that automatically updates all component prefixes whenever changes are needed? ...