I'm currently experimenting with creating a decorator in Angular that will display a spinner on top of the main component.
Essentially, my main component is making API requests and I want to overlay the decorator on top of the method.
This is how I envision it working:
export function loaderDecorator() {
return function (target: Object, propertyName: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = async function (...args: any) {
//create a new HttpSpinnerComponent and attach it to the target component
try {
const result = await originalMethod.apply(this, args);
//remove HttpSpinner component
return result;
} catch (e) {
//remove HttpSpinner component
}
};
return descriptor;
};
}
However, despite searching for solutions, I have yet to find one that works. I am wondering if you might know how I can access the Angular component factory from my decorator, or if there is another way to overlay a spinner component on top of my loading component (I have also tried interceptors and services without success).