Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Side multi-level menu doesn't work with Angular 8.

See original GitHub issue

Hello, multilevel sidebar menu does’t work on Angular 8 (TypeScript), here is the HTML code:

<li class="nav-item has-treeview">
          <a href="#" class="nav-link">
            <i class="nav-icon far fa-envelope"></i>
            <p>
              Mailbox
              <i class="fas fa-angle-left right"></i>
            </p>
          </a>
          <ul class="nav nav-treeview" data-widget="tree">
            <li class="nav-item">
              <a href="../mailbox/mailbox.html" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Inbox</p>
              </a>
            </li>
            <li class="nav-item">
              <a href="../mailbox/compose.html" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Compose</p>
              </a>
            </li>
            <li class="nav-item">
              <a href="../mailbox/read-mail.html" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Read</p>
              </a>
            </li>
          </ul>
        </li>

When I click on menu to expand, it doesn’t open as expected.

Thanks,

Issue Analytics

State:
Created 4 years ago
Comments:5

Top GitHub Comments

1reaction

REJackcommented, Dec 19, 2019

The markup look correct, may you need to init the treeview on page load. Try to add $('[data-widget="treeview"]').Treeview('init');.

0reactions

emilioyncommented, Dec 19, 2019

Guys, found the solution:

Add “node_modules/jquery/dist/jquery.min.js” and “node_modules/admin-lte/dist/js/adminlte.min.js” to “scripts” section in angular.json;
Following a sample valid markup:

<li class="nav-item has-treeview"> <a href="#" class="nav-link"> Mailbox </a> <ul class="nav nav-treeview" data-widget="tree"> <li class="nav-item"> <a href="../mailbox/mailbox.html" class="nav-link"> Inbox </a> </li> <li class="nav-item"> <a href="../mailbox/compose.html" class="nav-link"> Compose </a> </li> <li class="nav-item"> <a href="../mailbox/read-mail.html" class="nav-link"> Read </a> </li> </ul> </li>

Is this approach correct? If so, I’ll close this issue.

Top Results From Across the Web

Facing Css issue in multi Level Menu - angular - Stack Overflow

I am trying to build a multi level side navigation menu and i am able to complete it but some css issue is...

Create a Multi-level Drop-down Menu in Angular 11

We discuss how to create multi-level drop-down menus in JavaScript and Angular in this web development tutorial. Learn more.

ng-material-multilevel-menu - npm

Material Multi-Level Menu for Angular Projects.. Latest version: 5.5.3, last published: 2 years ago. Start using ng-material-multilevel-menu ...

Bootstrap nested (multilevel) Dropdown - free examples

Nested dropdowns built with Bootstrap 5. Tutorial & templates for multilevel navbar dropdowns menu, activated on hover or on click & much more....

Dropdown - Angular powered Bootstrap

Inputs ; open. Defines whether or not the dropdown menu is opened initially. Type: boolean. Default value: false ; placement. The preferred placement...