Modal dynamically loaded with component factory

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Modal dynamically loaded with component factory

Bldg25 pro asked 7 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 7 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?

Bldg25 pro answered 7 years ago

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

Mehdi Daustany answered 5 years ago

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 5 years ago

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

https://mdbootstrap.com/docs/angular/modals/basic/#dynamic
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
About author
Bldg25
Pro User
15Support score
12Questions 2Answers
0Snippets likes 0Snippets