Modal dynamically loaded with component factory

Topic: Modal dynamically loaded with component factory

Bldg25 pro asked 6 years ago

We are attempting to load modals dynamically through one location in the layout of our app. I have set up use of a ComponentFactoryResolver that is working except when we add a modal to the displayed template. The modal loads if it exists in a template prior to being shown, but not when in the dynamically instantiated component. Incidentally we have the following in our template declaring the modal.

[config]="{backdrop: false}"

How might we resolve this? The following error is thrown: ERROR TypeError: Cannot read property 'backdrop' of undefined at ModalDirective.webpackJsonp.../../../../angular-bootstrap-md/modals/modal.directive.js.ModalDirective.showBackdrop (modal.directive.js:201) at ModalDirective.webpackJsonp.../../../../angular-bootstrap-md/modals/modal.directive.js.ModalDirective.show (modal.directive.js:110) at ClosedBetaModalComponent.webpackJsonp.../../../../../src/app/shared/modals/closed-beta-modal/closed-beta-modal.component.ts.ClosedBetaModalComponent.show (closed-beta-modal.component.ts:34) at ModalContainerDirective.webpackJsonp.../../../../../src/app/shared/modals/modal-container.directive.ts.ModalContainerDirective.showModal (modal-container.directive.ts:39) at SafeSubscriber._next (modal-container.directive.ts:28) at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrSetError (Subscriber.js:247) at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:187) at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125) at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) at DistinctUntilChangedSubscriber.webpackJsonp.../../../../rxjs/operator/distinctUntilChanged.js.DistinctUntilChangedSubscriber._next (distinctUntilChanged.js:103)

Bldg25 pro commented 6 years ago

This could be due to the fact that the modal is being loaded within nested ComponentFactoryResolvers and that one of your hooks anticipates the availability of components before the parent has rendered?

Add comment

Bldg25 pro answered 6 years ago

0 0 Best answer

I found out that calling after ngAfterViewChecked is the best strategy.

Add comment

Mehdi Daustany free answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

It is because when you try to load component dynamically by factory like below:

const factory = this.resolver.resolveComponentFactory(YOURModalComponent);
const componentRef = this.fileAttacherContainer.createComponent(factory);
const component = componentRef.instance;

You have to wait till the component creation by the factory resolver, I mean when the component doesn't create yet then initialize of backdrop not called, for example if you call your show modal like this:

setTimeout(() => {
    component.show();
}, 2000); //any millisecond

Do not forget this is a bad solution, but I told for your understanding.

Finally, the good solution is using Promises or simply call component.show(); in ngAfterViewInit of your child component.

Arkadiusz Idzikowski staff commented 4 years ago

Implementation of dynamic modal is now available in the MDB Angular library:

https://mdbootstrap.com/docs/angular/modals/basic/#dynamic

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

Bldg25

Pro User 15Support score
12Questions 2Answers 0Snippets