Dispose method does not work when loading data asyncronously

[marlonreid]

Version: 2.7.1

I am using MetisMenu in an angular app, and ran into the problem described in #22 and #116 where metismenu no longer shows children when clicking on parents when loading data asynchronously.

I have tried the suggestion of first disposing the menu, loading the data and re-initialising the data but still child sections do not show when clicking on the parent. I have also tried different disposing, setting and re-initialising the menu but nothing works. It works well when the data is loaded synchronously

html

<div id="sidebar-collapse">
    <div class="admin-block d-flex">
    </div>
    <ul class="side-menu metismenu">
        <li *ngFor="let item of menuitems">
            <a href="javascript:;">
                <i class="sidebar-item-icon {{item.icon}}"></i>
                <span class="nav-label" (click)="onItemClick(item)">{{item.title}}</span>
                <i *ngIf="item.subItems.length" class="fa fa-angle-left arrow"></i>
            </a>
            <ul *ngFor="let subItem of item.subItems" class="nav-2-level collapse" routerLinkActive="in">
                <li>
                    <a routerLink="#" routerLinkActive="active" (click)="onItemClick(subItem)">{{subItem.title}}</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

code that loads data async
Observable.fromPromise(this.getMenuData()) .subscribe((response) => { $(".metismenu").metisMenu('dispose'); this.menuitems = response $(".metismenu").metisMenu(); })

Please give a suggestion on how to get this working asynchronously.

[onokumus]

metisMenu does not support angular, react or vue.