We have implemented AspNetZero Angular-.netCore template in our project and below is the folder structure of components:
Maintenance(Parent) |-- Campaigns | |-- campaigns.component.ts | |--add-edit-campaigns.component.ts | |--add-edit-segments.component.ts | |--campaigns.module.ts | |--campaigns-routing.modules.ts | |-- AdGroups | |--adgroups.component.ts | |--add-edit-adgroups.component.ts | |--adgroups.module.ts | |--adgroups-routing.module.ts | |--Keywords | |--keywords.component.ts | |--add-edit-keywords.component.ts | |--keywords.module.ts | |--keyword-routing.module.ts
We have already implemented modules lazy loading. We now need to implement dynamic component loading of modals as in case of the Campaigns, the components would increase exponentially as we proceed with the development.
So as per the current implementation, when the campaigns.component is loading, along with this the add-edit-campaigns.component and add-edit-segment component is also getting pre-loaded in the DOM as both are modal components.
As the number of modal components would increase, all these components would be pre-loaded in the DOM which would hamper the performance.
Could you please help us out and explain how can we implement Dynamic component of modals.
3 Answer(s)
-
0
hi,
I can point you some articles about dynamically loading bootstrap 4 modal component
<a class="postlink" href="https://medium.com/front-end-hacking/dynamically-add-components-to-the-dom-with-angular-71b0cb535286">https://medium.com/front-end-hacking/dy ... b0cb535286</a> <a class="postlink" href="https://medium.com/@angularlicious/dynamically-loaded-bootstrap-4-modal-component-powered-by-angular-6621f5fd3173">https://medium.com/@angularlicious/dyna ... 21f5fd3173</a>
-
0
THank you for the reply, we were able to implement the Dynamic modal component loading by following the second link and a few changes to our code.
One change we did was installing ng-bootstrap version 1.1.1 for the code to work as desired. The lastest ng-bootstrap version did'nt work.
-
0
Thanks @sumitshah for your feedback.
