[bug?] Menus will not display on dynamic content

[efortes]

The menu items won't display if the content is loaded from the backend (dynamic data)
My code
<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-js-menu" for="menu-speed"> <li class="mdl-menu__item">Fast</li> <li class="mdl-menu__item">Medium</li> <li class="mdl-menu__item">Slow</li> </ul>

In non dynamic content the current div is added:

<div class="mdl-menu__outline mdl-menu--bottom-right" style="width: 148.313px; height: 208px;"></div>

Am i doing something wrong or is this a bug?

[efortes]

I am using angular 2

[efortes]

`

<script> var button = document.createElement('button'); var textNode = document.createTextNode('Click Me!'); button.appendChild(textNode); button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect'; componentHandler.upgradeElement(button); document.getElementById('container').appendChild(button); </script>`

You need to use the componentHandler to fix this problem

[tjoskar]

Calling .upgradeAllRegistered() after the template has rendered should do the trick.

Eg. in angular 2:

ngAfterViewInit() {
    window.componentHandler.upgradeAllRegistered();
}

[efortes]

Ahh great answer tjoskar. I will try that

[efortes]

For the typescript users. You might want to declare the window object on top.

declare var window:any;

[maiakaat]

I seem to have seen possible issues when using Angular 2, but I'm too much of a beginner to add anything meaningful at this stage.

[Garbee]

Please use StackOverflow for support and integration assistance. This tracker is only for problems with the code provided by Material Design Lite.

Thank you.