Update loading.directive.ts

npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts

@@ -1,17 +1,16 @@
 import {
-  ComponentFactoryResolver,
   ComponentRef,
   Directive,
   ElementRef,
   EmbeddedViewRef,
-  HostBinding,
   Injector,
-  Input,
   OnDestroy,
   OnInit,
   Renderer2,
+  effect,
   inject,
-  input
+  input,
+  ViewContainerRef
 } from '@angular/core';
 import { Subscription, timer } from 'rxjs';
 import { take } from 'rxjs/operators';
@@ -19,29 +18,38 @@ import { LoadingComponent } from '../components';
 
 @Directive({
   selector: '[abpLoading]',
+  host: {
+    '[style.position]': '"relative"'
+  }
 })
 export class LoadingDirective implements OnInit, OnDestroy {
   private elRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private cdRes = inject(ComponentFactoryResolver);
   private injector = inject(Injector);
   private renderer = inject(Renderer2);
+  private viewContainerRef = inject(ViewContainerRef);
 
-  private _loading!: boolean;
+  readonly loading = input(false, { alias: 'abpLoading' });
+  readonly targetElementInput = input<HTMLElement | undefined>(undefined, { alias: 'abpLoadingTargetElement' });
+  readonly delay = input(0, { alias: 'abpLoadingDelay' });
 
-  @HostBinding('style.position')
-  position = 'relative';
+  private targetElement: HTMLElement | undefined;
 
-  @Input('abpLoading')
-  get loading(): boolean {
-    return this._loading;
+  componentRef: ComponentRef<LoadingComponent> | null = null;
+  rootNode: HTMLDivElement | null = null;
+  timerSubscription: Subscription | null = null;
+
+  constructor() {
+    effect(() => {
+      const newValue = this.loading();
+      this.handleLoadingChange(newValue);
+    });
   }
 
-  set loading(newValue: boolean) {
+  private handleLoadingChange(newValue: boolean) {
     setTimeout(() => {
       if (!newValue && this.timerSubscription) {
         this.timerSubscription.unsubscribe();
         this.timerSubscription = null;
-        this._loading = newValue;
 
         if (this.rootNode) {
           this.renderer.removeChild(this.rootNode.parentElement, this.rootNode);
@@ -54,9 +62,9 @@ export class LoadingDirective implements OnInit, OnDestroy {
         .pipe(take(1))
         .subscribe(() => {
           if (!this.componentRef) {
-            this.componentRef = this.cdRes
-              .resolveComponentFactory(LoadingComponent)
-              .create(this.injector);
+            this.componentRef = this.viewContainerRef.createComponent(LoadingComponent, {
+              injector: this.injector
+            });
           }
 
           if (newValue && !this.rootNode) {
@@ -67,22 +75,13 @@ export class LoadingDirective implements OnInit, OnDestroy {
             this.rootNode = null;
           }
 
-          this._loading = newValue;
           this.timerSubscription = null;
         });
     }, 0);
   }
 
-  @Input('abpLoadingTargetElement')
-  targetElement: HTMLElement | undefined;
-
-  readonly delay = input(0, { alias: "abpLoadingDelay" });
-
-  componentRef!: ComponentRef<LoadingComponent>;
-  rootNode: HTMLDivElement | null = null;
-  timerSubscription: Subscription | null = null;
-
   ngOnInit() {
+    this.targetElement = this.targetElementInput();
     if (!this.targetElement) {
       const { offsetHeight, offsetWidth } = this.elRef.nativeElement;
       if (!offsetHeight && !offsetWidth && this.elRef.nativeElement.children?.length) {