jquery - Material Design lite menu is not working in angular 2 -
trying use material design lite menu menu never appears on screen. while research found problem material design lite isn't designed used dynamic pages.
found few solution seems not worked
integrating material design lite angular2
https://github.com/google/material-design-lite/issues/4243
https://getmdl.io/started/#dynamic
here app.component.ts
import { component } '@angular/core'; var componenthandler: any; @component({ selector: 'my-app', templateurl: 'home/homepage', }) export class appcomponent {}
homepage.cstml
<button id="test1" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="test1"> <li class="mdl-menu__item">mobile app</li> <li class="mdl-menu__item">customer care</li> <li class="mdl-menu__item">track order</li> <li class="mdl-menu__item">log in</li> </ul>
while research found have use componenthandler.upgradeelement or componenthandler.upgradedom(); or componenthandler.upgradeallregistered(); . i, not use know have use it.
can please let me know how can achieve menu in angular 2
this solve problem
import { component } '@angular/core'; declare var window: any; @component({ selector: 'my-app', templateurl: 'home/homepage', }) export class appcomponent { ngafterviewinit() { window.componenthandler.upgradeallregistered(); }}
Comments
Post a Comment