SolvedAdminLTE Sidebar menu treeview not working after redirection in Angular 4

Hi,

I'm using AdminLTE theme (2.4.0-rc) in Angular4 project. Dashboard with the sidebar menu is on url "http://host/". When I enter this address in browser address field, everything is working correct.
Problem is when app is on other url, i.e. "http://host/login" and there is link to main page or redirection in code used one of methods:
this.router.navigateByUrl('/') or <a routerLink="/">.
After redirection to the Dashboard by one of these methods, sidebar menu "treeview" option does not open. Therefore after redirection by <a href="/"> everything works correct. There isn't any errors in dev console. It seems like some AdminLTE js function not see "treeview" element after redirection by Angular 4 methods. Is it any solution to make Angular 4 works as expected?

30 Answers

✔️Accepted Answer

This problem in Angular 6 and AdminLTE 3 was solved as follows:

Note: I have a Sidebar component that contains the treeview.

Import jquery and AdminLTE

import * as $ from 'jquery';
import * as AdminLte from 'admin-lte';

...

In ngAfterViewInit:

ngAfterViewInit() {
    $('[data-widget="treeview"]').each(function() {
        AdminLte.Treeview._jQueryInterface.call($(this), 'init');
    });
}

I do not know if this is the best solution, but it worked.

Other Answers:

Hello @mb00110101, i had the same problem in a Angular 4 application.

In my case, i have the loginPage
image
and the homePage
image

When i reload the homePage, everything is ok.
But, if i navigate from loginPage to "homePage" the treeview menu was not working.

In my analysis i see that adminlte.js file initializes treeview plugin in the document.load function, but, in this momment, the DOM will not have the treeview elements.
So, in the homePage ngOnInit method i put a code to initialize the treeview.

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

and, of course my treeview in HTML has the attribute data-widget=tree like the following

<ul class="sidebar-menu" data-widget="tree">
  <li class="header">Menu</li>
  <li class="treeview link-pointer" routerLinkActive="active menu-open">
      <a>
        <i class="fa fa-linux"></i> <span>Item</span>
         <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
         </span>
       </a>
      <ul class="treeview-menu">
            <li class="" routerLinkActive="active"><a [routerLink]="['/main']"><i class="fa fa-linux"></i> Sub Item</a></li>
      </ul>
   </li>        
</ul>

I hope it can help you.
Bye

Hello,

I faced the same problem on AdminLTE 3 with React. This is how I solved it.

Create a JavaScript file with the content below :

const $ = window.$; export function loadTree() {
  const trees: any = $('[data-widget="treeview"]');
         trees.Treeview('init');

}

And on the react component which contains the menu items invoke this function inside componentDidMount()

import { loadTree } from "./js/MenuTreeHelper.js";

export default class Menu extends Component {

componentDidMount() {
loadTree();
}

For anyone who is struggling with this. I'm using AdminLTE 3.0 with React. Same situation, redirecting user from Login to Dashboard.

useEffect(() => {
const trees = window.$('[data-widget="treeview"]');
trees.Treeview('init');
}, []);

or you can set in componentDidMount() if you are using class-based component. Spend 2 days investigating this.

Hope it helps.

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

worked for me thanks..
my issue is : after login i ll redirect to dashboard. when clicking first time the menu (some page url). it will reloead the page.. but

  const trees: any = $('[data-widget="tree"]');
  trees.tree();

this solution solved my problem

More Issues: