2

I am struggling in getting Material Design Lite (MDL) to work with the 2.0.0-rc.1 version of Angular2, specifically with dynamic content.

I have two components, one being the main app component that incorporates the second. I can put HTML into the main component's template, use MDL classes, have the component implement OnInit and call componentHandler.upgradeDom() from there. All HTML added thus far is now registered by MDL.

However when I have the second component use a service and dynamically add the result into its template, then this stuff is not registered by the first componentHandler.upgradeDom(). I don't understand why calling componentHandler.upgradeDom() from the second component after it has added the dynamic content does not work, either. I thought it should. Does it use a different componentHandler or something?

Another idea would be to have the 2nd component somehow call a function of the first component to tell it to use its componentHandler and update the DOM from there, but I don't know how to do that.

For test purposes I added a native Javascript file that calls the very same and have a button trigger it - that works.

I have found several directives on StackOverflow that supposedly auto-register all new HTML, but none work for me. Does anyone know how to do this for this version of Angular2?

kunterbunt
  • 614
  • 1
  • 7
  • 19

2 Answers2

0

I'm using the directive found here to call componentHandler.upgradeAllRegistered(); : https://stackoverflow.com/a/35451821/1341825

In order to get component CSS to work, you also need to set encapsulation:ViewEncapsulation.None on your component (do import {Component, ViewEncapsulation} from '@angular/core';)

You may also need to inject an ElementRef into the component and then explicitly call componentHandler.upgradeElement on it. (This did not work for me, but I saw it working in some examples.) Checkout:

Community
  • 1
  • 1
theUtherSide
  • 3,338
  • 4
  • 36
  • 35
0

Unfortunately theUtherSide's answer didn't work me, either.

My mistake was very specific to my project. I was adding dynamic content and telling componentHandler.upgradeDom(); but it didn't work for content that was not visible at that moment due to CSS setting it to opacity: 0; max-height: 0. This is correct for my project, which would change those settings upon a click to make them visible to the user. Apparently this is why it was ignored for the upgradeDom() function.

I have added the same function elsewhere in my code - basically when I load the content I set a boolean to true indicating that it has changed. When the user makes visible such a hidden part and that boolean is true, then the function is called and the boolean set to false so it doesn't happen every time.

Maybe someone else is in the same spot. It's certainly not the nicest solution, having to check for these things and whatnot, but hey, it works.

Edit Actually I'm not 100% positive it was because the content in question was hidden, maybe I was just calling the function too early. Might want to check for that, too.

kunterbunt
  • 614
  • 1
  • 7
  • 19