Sidebar menu with sub menus - cannot expand to access sub-menus

Issue type:

• Feature request
• Bug report
• Documentation

Environment:

• AdminLTE Version: 2.4.10 with Angular 7
• Operating System: Windows 10
• Browser (Version): Recent Chrome (Electron)

Description:

The same issue was reported many times with the sidebar menu not expanding when clicked to access the sub-menus => can not access the sub-menus. I tried without success all things suggested here - https://github.com/ColorlibHQ/AdminLTE/issues/1666 and here https://github.com/ColorlibHQ/AdminLTE/issues/1570

What was tried

1. Loading Admin LTE globally in the angular.json under the scripts section like this

"scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
              "./node_modules/admin-lte/dist/js/adminlte.min.js"
]

In the html I have <ul class="sidebar-menu" data-widget="tree">

When I try to execute

 $(document).ready(() => {
      const trees: any = $('[data-widget="tree"]');
      if (trees) {
        trees.tree();
      }
    });

I get the error .tree() function was not found. The user @thiagoreis got the same error here https://github.com/ColorlibHQ/AdminLTE/issues/1570. Later @thiagoreis suggested a solution which without success (I tried but I get the same error).

1. I removed adminlte.min.js from angular.json scripts and tried to load using import 'admin-lte' (did not work) and then I tried also require ('admin-lte') - did not work either I always get the same error .tree() function was not found

[gongAll]

In case anyone is struggling with this, this thread was really helpful: (https://stackoverflow.com/questions/45512475/angular4-cant-find-jquery-ui-functions) – look for the answer of Chris and after applying it, follow the code:

$(document).ready(() => {
      const trees: any = $('[data-widget="tree"]');
      if (trees) {
        trees.tree();
      }
    });

on the ngOnInit of your component

[magicdict]

In case anyone is struggling with this, this thread was really helpful: (https://stackoverflow.com/questions/45512475/angular4-cant-find-jquery-ui-functions) – look for the answer of Chris and after applying it, follow the code:

$(document).ready(() => {
      const trees: any = $('[data-widget="tree"]');
      if (trees) {
        trees.tree();
      }
    });

on the ngOnInit of your component

Great!!! It really works!!!