Topic: Dynamic Modal API imports
Hi,
I was trying out the new dynamic modal implementation from the last Angular mdb update. I would like to know what are the individual API imports needed for this to work. From my testing I needed to add the MDBModalRef as a provider in the parent module so I didnt get the "No provider for ..." error. I'm not sure this is correct way tho.
Also I was trying to pass some data to the ModalComponent. The data I was passing was an object. In the docs it says we should pass the data like modalRef.content.example = {...} after calling the show method to assign the ref.
The only way I got it to work was having the variables on the target modal component initialized ( example: object = undefined; ) and using the elvis operator on the html.
Otherwise when I tried to refer to the modal attributes with the "modalRef.content.example=...." they were not there and never got initialized.
Another issue I faced was with the style overflow y auto. since the div where we normally place that style is now being auto generated I had to create a class with that style to include it in the containerClass attribute. Would be nice if it was just another atribute or even better if it could be set automaticly if the modal height was bigger than the viewport height.
Cheers.
Joao
Hello,
1. Please make sure you injected MDBModalRef in modal component and provided it in the component that will call dynamic modal as well, like in examples in our documentation. There should be no need to add anything to modules if you use 7.1.0 version.
2. You need to initialize the data you want to pass in dynamic modal ts file. This is how it works currently. Please provide more information and reproduction steps so we can debug the problem.
3. We will think about best solution (probably it will be an option that you can add in the show method of modal service). Thank you for the suggestion.
Regards,
Arek
Hey there,
1. So the problem and the reason why I have to place the MDBModalRef in the app module providers is because I'm using it on some of the services. So unless I use it as singleton and have it instanciated before my other services it will throw the "no provider for modalRef" error. Most of my http calls are made in the services so for me its only natural to have the modals called on the subscription resolutions that stay within the service boundaries.
2. In your examples you have a non instanciated attribute of type string ( example: string; ) on the target modal component. I tested it out it works fine for some reason. But if you copy your example and just change string to object both on the target modal and the caller without first instantiating the atribute on the target modal component and debug it you will see that those attributes are not present in the modalRef.content object and there for are not assignable.
3. Thank you for taking it into consideration.
Hello,
Thank you for the detailed information. We will take a closer look at these problems.
Regards,
Arek
The problem with injecting data to dynamic modal should be resolved in next version.
I tried to recreate the problem with mdbModalRef but without success. I injected modalRef and Modal Service in another service and it worked correctly even without updating the providers list in app.module. Could you provide more information about reproduction steps or demo app on which I would be able to debug this problem? You can send it to me on a.idzikowski@mdbootstrap.com
Hello Arek,
I have sent you an email with a demo app to help you on reproducing the error.
Also I included some instructions on the email on how to trigger it.
Regards,
João
Hello,
I checked my inbox (and spam folder as well) but it looks like I didn't receive any email from you. Could you try to send it again?
Hello,
I resent the email. The subject is "FW: mdbModalRef Testing" and it was sent from my mdb registered email account.
The first email was blocked due to content attachment guidelines,
The second failed because it could not find a.idzikowski@mdbootstrap.com.
So ive just sent a third for the same mailbox strangely I think it went through this time...
If you still did not get it please let me know
Regards,
Joao
Arkadiusz Idzikowski staff commented 6 years ago
I received the email, thank you.
I checked the demo app and I think you just need to remove modalRef from the service constructor and use it in the same way as in the app component.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.0.0
- Device: PC
- Browser: Chrome / Firefox / Edge
- OS: Windows 10 PRO x64
- Provided sample code: No
- Provided link: No