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?

[viniciuslj]

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.

[dnzbrkyrk]

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(); }