Tukukkk

I have a jqxmenu but the content is defined by a ngFor. With static information it renders as designed, but when i shift to a ngFor loop which is set dynamically, it doesnt seem to properly apply classes accordingly.

<jqxMenu #gridMenu [width]="240" [height]="'auto'" [mode]="'popup'" [autoOpenPopup]="false" [theme]="'context'">

    <ul>

        <li *ngFor="let toolbarItem in toolbar">

            <i><span{{toolbarItem['text']}}</span></i>

        </li>

    </ul>

</jqxMenu>

I tried to do something like:

<jqxMenu #gridMenu [auto-create]="false">...</jqxMenu>

and then created a change detector:

@ViewChild("gridMenu") gridMenu: jqxMenuComponent;

ngOnChanges()   {

    this.gridMenu.createComponent();

}

This also seems to fail. I noticed it would not apply the JQX classes as it would normally, and similarly close on click. I find it odd. I was tempted to just programatically add them all, but i didnt want to create a hack to add/remove the items if there is an actual step I am just missing.

Is there something I can do such that it would render correctly? I also looked at the API (https://www.jqwidgets.com/angular-components-documentation/documentation/jqxmenu/angular-menu-getting-started.htm?search=) and also noticed that there was no redraw method either.

Is there a way to do this, or should I write additional code to add/remove the classes for non-hover and hover states and apply accordingly?