Angular, custom decorator that add a new component in the actual component

Question

I'm trying to create a decorator in angular to add a spinner on top of the actual component.

So my actual component is doing any request to the API and I'm putting the decorator on top of the method.

Ideally it should look like this.

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 append it to the target component

      try {
        const result = await originalMethod.apply(this, args);
        //delete HttpSpinner component
        return result;
      } catch (e) {
        //delete HttpSpinner component
      }
    };
    return descriptor;
  };
}

But after looking up for a while now I can't find or do anything working. So I was wondering if maybe you knew how i could get access to the angular component factory from my decorator or any other way to put a spinner component on top of my actual loading component (I tried with interceptors and service but can't manage to make it work too)

Answer 1

Angular doesn't support custom decorator on Components.

We don't support them because there's a big conceptual mismatch - the Angular compiler is trying to statically transform classes according to their Angular annotations, but custom decorators are attempting to arbitrarily change the shape of that class at runtime.

See this issue