0

Trying to use material design lite menu But the menu never appears on the screen. While research found that the problem is Material Design Lite isn't designed to be used with dynamic pages.

Found the few solution but seems to not worked

MDL not fully working with Angular2

Integrating Material Design Lite with Angular2

https://github.com/google/material-design-lite/issues/4243

https://getmdl.io/started/#dynamic

Here is the app.component.ts

import { Component } from '@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 that I have to use componentHandler.upgradeElement or componentHandler.upgradeDom(); or componentHandler.upgradeAllRegistered(); . But exactly I, am not use know where I have to use it.

Can anyone please let me know how can I achieve the menu in angular 2

San Jaisy
  • 15,327
  • 34
  • 171
  • 290

1 Answers1

0

This solve my problem for now 

import { Component } from '@angular/core';
declare var window: any;
@Component({
    selector: 'my-app',
    templateUrl: 'Home/HomePage',

})
export class AppComponent {
    ngAfterViewInit() {
        window.componentHandler.upgradeAllRegistered();
    }}
San Jaisy
  • 15,327
  • 34
  • 171
  • 290