fix(lib): rework loadingSuccess and loadingError outputs to inputs (pass in handler)

- the outputs don't work on * based structural directives

- desugared ng-template based syntax doesn't work for this use case (retrieve tag, ...)

Author: tomastrajan

projects/elements-demo/src/app/features/examples/basic/basic.component.html

@@ -92,7 +92,8 @@ <h2 id="error-template">
             'https://unpkg.com/wrong-url.js?module';
             loadingTemplate: loading;
             errorTemplate: error;
-            module: true
+            module: true;
+            loadingError: customLoadingErrorHandler
           "
           raised
         >

projects/elements-demo/src/app/features/examples/basic/basic.component.ts

@@ -52,6 +52,13 @@ export class BasicComponent {
   onSliderChange(value: number) {
     this.xAxis = [-value, value];
   }
+
+  customLoadingErrorHandler(error: ErrorEvent) {
+    console.log(
+      '[Optional custom loading error handler] Loading failed:',
+      error,
+    );
+  }
 }
 
 const CODE_EXAMPLE_1 = `<!-- url = 'https://unpkg.com/@material/mwc-icon@0.27.0/mwc-icon.js?module'; -->

projects/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts

@@ -34,9 +34,10 @@ export class LazyElementDynamicDirective implements OnInit {
   errorTemplateRef: TemplateRef<any> | null = null;
   @Input('axLazyElementDynamicModule') isModule = false; // eslint-disable-line @angular-eslint/no-input-rename
   @Input('axLazyElementDynamicImportMap') importMap = false; // eslint-disable-line @angular-eslint/no-input-rename
-
-  loadingSuccess = output<void>();
-  loadingError = output<ErrorEvent>();
+  @Input('axLazyElementLoadingSuccess') loadingSuccess?: () => void;
+  @Input('axLazyElementLoadingError') loadingError?: (
+    error: ErrorEvent,
+  ) => void;
 
   #viewRef: EmbeddedViewRef<any> | null = null;
 
@@ -98,7 +99,7 @@ export class LazyElementDynamicDirective implements OnInit {
       )
       .subscribe({
         next: () => {
-          this.loadingSuccess.emit();
+          this.loadingSuccess?.();
           this.#vcr.clear();
           const originalCreateElement = this.#renderer.createElement;
           this.#renderer.createElement = (name: string, namespace: string) => {
@@ -112,7 +113,7 @@ export class LazyElementDynamicDirective implements OnInit {
           this.#cdr.markForCheck();
         },
         error: (error) => {
-          this.loadingError.emit(error);
+          this.loadingError?.(error);
           const errorComponent =
             elementConfig.errorComponent || options.errorComponent;
           this.#vcr.clear();
@@ -122,7 +123,7 @@ export class LazyElementDynamicDirective implements OnInit {
           } else if (errorComponent) {
             this.#vcr.createComponent(errorComponent);
             this.#cdr.markForCheck();
-          } else if (ngDevMode) {
+          } else if (ngDevMode && !this.loadingError) {
             console.error(
               `${LOG_PREFIX} - Loading of element <${this.tag}> failed, please provide <ng-template #error>Loading failed...</ng-template> and reference it in *axLazyElementDynamic="errorTemplate: error" to display customized error message in place of element\n\n`,
               error,

projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts

@@ -51,9 +51,10 @@ export class LazyElementDirective implements OnInit, OnChanges {
   errorTemplateRef: TemplateRef<any> | null = null;
   @Input('axLazyElementModule') isModule?: boolean; // eslint-disable-line @angular-eslint/no-input-rename
   @Input('axLazyElementImportMap') importMap = false; // eslint-disable-line @angular-eslint/no-input-rename
-
-  loadingSuccess = output<void>();
-  loadingError = output<ErrorEvent>();
+  @Input('axLazyElementLoadingSuccess') loadingSuccess?: () => void;
+  @Input('axLazyElementLoadingError') loadingError?: (
+    error: ErrorEvent,
+  ) => void;
 
   #viewRef: EmbeddedViewRef<any> | null = null;
   #url$ = new BehaviorSubject<string | null>(null);
@@ -86,6 +87,7 @@ export class LazyElementDirective implements OnInit, OnChanges {
 
   #setupUrlListener(): void {
     const tpl = this.#template as any;
+    console.log(tpl);
     const elementTag = tpl._declarationTContainer
       ? tpl._declarationTContainer.tagName || tpl._declarationTContainer.value
       : tpl._def.element.#template.nodes[0].element.name;
@@ -120,7 +122,7 @@ export class LazyElementDirective implements OnInit, OnChanges {
             ),
           ).pipe(
             catchError((error) => {
-              this.loadingError.emit(error);
+              this.loadingError?.(error);
               this.#vcr.clear();
               const errorComponent =
                 elementConfig.errorComponent || options.errorComponent;
@@ -130,7 +132,7 @@ export class LazyElementDirective implements OnInit, OnChanges {
               } else if (errorComponent) {
                 this.#vcr.createComponent(errorComponent);
                 this.#cdr.markForCheck();
-              } else if (ngDevMode) {
+              } else if (ngDevMode && !this.loadingError) {
                 console.error(
                   `${LOG_PREFIX} - Loading of element <${elementTag}> failed, please provide <ng-template #error>Loading failed...</ng-template> and reference it in *axLazyElement="errorTemplate: error" to display customized error message in place of element`,
                 );
@@ -139,7 +141,7 @@ export class LazyElementDirective implements OnInit, OnChanges {
             }),
           );
         }),
-        tap(() => this.loadingSuccess.emit()),
+        tap(() => this.loadingSuccess?.()),
         mergeMap(() => customElements.whenDefined(elementTag)),
         takeUntilDestroyed(this.#destroyRef),
       )