diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.component.html b/projects/elements-demo/src/app/features/examples/basic/basic.component.html
index 4eafa5c..53b5459 100644
--- a/projects/elements-demo/src/app/features/examples/basic/basic.component.html
+++ b/projects/elements-demo/src/app/features/examples/basic/basic.component.html
@@ -92,7 +92,8 @@
'https://unpkg.com/wrong-url.js?module';
loadingTemplate: loading;
errorTemplate: error;
- module: true
+ module: true;
+ loadingError: customLoadingErrorHandler
"
raised
>
diff --git a/projects/elements-demo/src/app/features/examples/basic/basic.component.ts b/projects/elements-demo/src/app/features/examples/basic/basic.component.ts
index 64d8950..171ffd8 100644
--- a/projects/elements-demo/src/app/features/examples/basic/basic.component.ts
+++ b/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 = `
diff --git a/projects/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts b/projects/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts
index c3c73f6..088da42 100644
--- a/projects/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts
+++ b/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 | 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();
- loadingError = output();
+ @Input('axLazyElementLoadingSuccess') loadingSuccess?: () => void;
+ @Input('axLazyElementLoadingError') loadingError?: (
+ error: ErrorEvent,
+ ) => void;
#viewRef: EmbeddedViewRef | 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 Loading failed... and reference it in *axLazyElementDynamic="errorTemplate: error" to display customized error message in place of element\n\n`,
error,
diff --git a/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts b/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts
index 5ba0ec5..3e1ceb0 100644
--- a/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts
+++ b/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts
@@ -51,9 +51,10 @@ export class LazyElementDirective implements OnInit, OnChanges {
errorTemplateRef: TemplateRef | 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();
- loadingError = output();
+ @Input('axLazyElementLoadingSuccess') loadingSuccess?: () => void;
+ @Input('axLazyElementLoadingError') loadingError?: (
+ error: ErrorEvent,
+ ) => void;
#viewRef: EmbeddedViewRef | null = null;
#url$ = new BehaviorSubject(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 Loading failed... 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),
)