Init / re-init MDB by function call

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Init / re-init MDB by function call

Benny Bottema pro asked 8 years ago

I have MDB almost fully running in my Angular2 applications, but I'm running into one issue that really affects any application that dynamically generates content (jquery, angular, reactjs etc): In the admin templates, mdb.js is included at the bottom of the page where it is known that the <body> is complete and all elements are there. mdb.js then implicitly triggers all plugins (such as Waves etc.). I tried moving all the initialisation logic (the actual plugin calls and init calls of the libraries) to a separate function that I can call separately when I'm sure the content has been included in the DOM, but it's proving an arduous task. Is it possible you guys encapsulate these calls in one function that I can call lateron?

Benny Bottema pro answered 8 years ago

One way around this that I can think of is the following: Have all the relevant @components register themselves with a service in ngAfterViewInit hook. When all relevant components have registered themselves this way, I know the DOM is complete, then load mdb.js and again call each individual @component so they can do additional initialization now that the plugins are made available by mdb.js. It's a little obtuse, I guess there's no other way right now. A nasty side effect is that I can't include mdb.js in my vendor.js bundle now (using Webpack) and mdb.js ends up in my own app-bundel.js.

Benny Bottema pro answered 8 years ago

Confirmed above workaround solved my issue. Everything is being initialised nicely now (too bad for the app-bundle, though).

Adrian Sawicki answered 8 years ago

Hello Benny, It's nice that you found a workaround. I can only add that we are working on Angular2 version of MDB and it should solve quite a lot of problems.
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

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
dynamic-content initialization
Related topics
0
Error console log when initialization
0
How I can Use the templates and object of MDB Angular pro
0
materialSelect not working on dynamically added html
0
Stepper event handler like "show.mdb.tab"
0
Problem with components initialization on V7.2.0 and UMD format
About author
Benny Bottema
Pro User
8Support score
9Questions 10Answers
0Snippets likes 0Snippets