Why does jqxMenu appear incorrectly?

Question

I am working on my own module for an angular project. I am trying to make a menu using jqxMenu, but when I run ng serve it does not appear the way it should. I ve imported jqxmenucomponent into my component as shown below

import { Component, OnInit, ViewChild, ViewChildren, ViewRef } from '@angular/core';
import { jqxMenuComponent } from 'jqwidgets-ng/jqxmenu';
import { DiagramPaperComponent} from '../diagram-paper/diagram-paper.component'

@Component({
  selector: 'app-statemachines-menu',
  templateUrl: './statemachines-menu.component.html',
  styleUrls: ['./statemachines-menu.component.scss']
})

export class StatemachinesMenuComponent implements OnInit {
    @ViewChild(DiagramPaperComponent) public readonly paper: DiagramPaperComponent;
    @ViewChild('jqxMenu') jqxMenu: jqxMenuComponent;
    
    public ngOnInit() {
       
    }
    
    public ngAfterViewInit() {
        this.centerItems();
    }

    public centerItems(): void {
        let firstItem = this.jqxMenu.elementRef.nativeElement.firstElementChild.children[0].firstElementChild;
        let width = 0;
        let borderOffset = 2;
        let allLiElements = this.jqxMenu.elementRef.nativeElement.firstElementChild.children[0].children;
        for (let i = 0; i < allLiElements.length; i++) {
            let currentLi = allLiElements[i];
            width += currentLi.offsetWidth + borderOffset;
        }
        
        let menuWidth = this.jqxMenu.elementRef.nativeElement.firstElementChild.offsetWidth;
        let calculatedOffset = (menuWidth / 2) - (width / 2);
        firstItem.style.margin = '0 0 0 ' + (calculatedOffset).toString() + 'px';
    }

    public onResize(event: any): void {
        let innerWidth = event.target.innerWidth;
        this.centerItems();
    }
}

I ve also imported jqxMenuModule into my module as shown below

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { jqxMenuModule } from 'jqwidgets-ng/jqxmenu';
import { DiagramPaperComponent } from './diagram-paper/diagram-paper.component';
import { StatemachinesMenuComponent } from './statemachines-menu/statemachines-menu.component';

@NgModule({
  declarations: [ DiagramPaperComponent, StatemachinesMenuComponent],
  imports: [CommonModule, jqxMenuModule]

})

export class StatemachinesModule { }

this is what the content of the menu in HTML

<div #content (window:resize)="onResize($event)">
    <jqxMenu #jqxMenu [width]="'100%'" [height]="30">
      <ul>
        <li>
          <img style='float: left; margin-right: 5px;' src='assets/log_gate_icons/module.png' />
          <span>Add New State</span>
        </li>
        <li>
          
          <span>Inputs</span>
        </li>
        <li>
          
          <span>Outputs</span>
        </li>
        <li>
          <img style='float: left; margin-right: 5px;' src='assets/log_gate_icons/save.png' />
          <span>Save Diagram</span>
        </li>
        <li>
          <img style='float: left; margin-right: 5px;' src='assets/log_gate_icons/load.png' />
          <span>Load Diagram</span>
        </li>
        <li>
          <img style='float: left; margin-right: 5px;' src='assets/log_gate_icons/sourcecode.png' />
          <span>Generate Code</span>
        </li>
      </ul>
    </jqxMenu>
  </div>

The result what I am getting after I run ng serve is below, basically it is just a list of text with images. Images are loaded correctly.

jqxmenu appereance

Answer 1

Have followed the JQ instructions on adding bootstrap and J Query scripts into your angular.json file?

"styles": [
     "./src/styles.css",
     "node_modules/jquery-ui/themes/base/theme.css",
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "node_modules/jqwidgets-ng/jqwidgets/styles/jqx.base.css",
     "node_modules/jqwidgets-ng/jqwidgets/styles/jqx.bootstrap.css"
...
]

and

"scripts": [
    "node_modules/jquery/dist/jquery.js",
    "node_modules/jquery-ui/ui/widgets/datepicker.js",
    "node_modules/popper.js/dist/umd/popper.js",
    "node_modules/bootstrap/dist/js/bootstrap.js",
...

Thats how I get my menus to work correctly.