Adminlte: Sidebar menu treeview not working after redirection in Angular 8 [BUG]

[RRGT19]

Describe the bug
Once you log in using the login page you will be redirected to the Dashboard. In this moment in the Dashboard the sidebar menu "treeview" option does not open. Also, a menu with a simple link (not treeview) does not work and sometimes the website is reload when you click on it.

To Reproduce
Steps to reproduce the behavior:

1. Go to login page
2. Continue to be redirected to the Dashboard
3. Try to click on a sidebar menu treeview

Expected behavior
A working sidebar menu treeview after a redirection from the log in page.

Environment:

• AdminLTE Version: 3.0.2
• Angular 8.3.21
• Operating System: macOS Catalina
• Browser (Version): Chrome (Latest)

Additional context
The same problem has been reported for Angular 4 and AdminLTE v2 here, but the solutions provided there does not work in Angular 8.

angular.json

"styles": [
      "node_modules/admin-lte/plugins/fontawesome-free/css/all.min.css",
      "node_modules/admin-lte/dist/css/adminlte.min.css",
      "src/styles.scss"
],
"scripts": [
      "node_modules/admin-lte/plugins/jquery/jquery.min.js",
      "node_modules/admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js",
      "node_modules/admin-lte/dist/js/adminlte.min.js"
]

[REJack]

You need to init the TreeView after login, with $('[data-widget="treeview"]').Treeview('init').

This issue https://github.com/ColorlibHQ/AdminLTE/issues/2550 can help you.

[RRGT19]

You need to init the TreeView after login, with $('[data-widget="treeview"]').Treeview('init').

This issue #2550 can help you.

Hi, those solutions did not work for me.

I have tried:

Method 1.

import {Component, OnInit} from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
  ngOnInit(): void {
    $('[data-widget="treeview"]').Treeview('init');
  }
}

This causes an error saying:

ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_2__(...).Treeview is not a function.

Method 2.

import {Component, OnInit} from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
  ngOnInit(): void {
    $(document).ready (() => {
      const trees: any = $('[data-widget = "treeview"]');
      trees.Treeview();
    });
  }
}

This causes an error saying:

jQuery.Deferred exception: trees.Treeview is not a function TypeError: trees.Treeview is not a function.

Method 3.

import {Component, OnInit} from '@angular/core';
import * as $ from 'jquery';
import * as AdminLte from 'admin-lte';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
  ngOnInit(): void {
    $('[data-widget="treeview"]').each(function() {
      AdminLte.Treeview._jQueryInterface.call($(this), 'init');
    });
  }
}

With this the sidebar menu treeview is working and there is no errors in the console, but, the button data-widget="pushmenu" in the navbar to toggle the sidebar is not working. You click on it and nothing happens.

--
Any idea how to fix this issue to have all working properly?

[REJack]

AdminLte.Layout._jQueryInterface.call($('body'));
AdminLte.PushMenu._jQueryInterface.call($('[data-widget="pushmenu"]'));

Try to add these lines in your ngOnInit() from Method 3, you need to init the PushMenu and Layout too to get the whole AdminLTE experience.

[RRGT19]

AdminLte.Layout._jQueryInterface.call($('body'));
AdminLte.PushMenu._jQueryInterface.call($('[data-widget="pushmenu"]'));

Try to add these lines in your ngOnInit() from Method 3, you need to init the PushMenu and Layout too to get the whole AdminLTE experience.

For some reason it's still not working with those two lines added.

What I have:

import {Component, OnInit} from '@angular/core';
import * as $ from 'jquery';
import * as AdminLte from 'admin-lte';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {

  constructor() {
  }

  ngOnInit(): void {
    $('[data-widget="treeview"]').each(function() {
      AdminLte.Treeview._jQueryInterface.call($(this), 'init');
      AdminLte.Layout._jQueryInterface.call($('body'));
      AdminLte.PushMenu._jQueryInterface.call($('[data-widget="pushmenu"]'));
    });
  }

}

But, I have it working now with a few new lines of code. I have used an EventEmitter from the HeaderComponent that emits when you click on the pushmenu button. I receives this notification on my parent which is the layout (I have divided everything in components) and here, in the layout, the method's logic is to add and remove the class sidebar-open and sidebar-collapse accordingly.

This logic and your recommendation make the template works as expected.

[gitcoderis]

Having the same issue.. None of the above answers solve this - 3rd level menu overlaps other menus (like in #2550, for example).
It works okay on initial page load, but after reloading page, menu behavior changes and it start to be buggy (overlapping other menus, .nav-child-indent does not work on expanded .sidebar-mini, expanding too quickly).
Tried various ways to init 'treeview' like suggested above, but nothing helps.
Is there a way how to solve this for angular?

[swtw122]

Hey guys, I had the same issue and fixed it with:

in the imports section add...
declare var $: any;

in ngOnInit section...
$('[data-widget="treeview"]').Treeview('init');

inside the sidebar component

[kinsmanma]

I figured I should share this, as it took me ages to figure it out as well.

So I had the issue when I init my treeview, pushmenu stopped functioning (no treeview and pushmenu worked fine).

few bits of info: angular 9.1.12 and AdminLTE 3, All pieces (header, content, aside, footer) split into components.

so first to to get treeview working:

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

at the top of the typescript (mine is in a aside component).

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

don't forget to implement afterviewinit.

next is giving your body an id:
<body id="portalBody" class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">

so you can use jquery on it.

and finally for your toggle link in the html (mine is in a header component):
<a role="button" class="nav-link" (click)="toggle()" href="javascript:void(0);" ><em class="fa fa-bars"></em></a>

in the line where it has data-widget=push menu, replace it for the line above and in the type script add the code below:
import * as $ from 'jquery';

and in the class, add the function:

toggle(): void { const portalBody = $('#portalBody'); if ( portalBody.hasClass( 'sidebar-collapse' )) { portalBody.removeClass('sidebar-collapse'); portalBody.addClass('sidebar-open'); } else { portalBody.addClass('sidebar-collapse'); } }

Hopefully this helps someone as much as everyone here helped me.

[wwongchaipanid]

import {Component, OnInit} from '@angular/core';

//import * as $ from 'jquery';       //DELETE THIS LINE
declare var $: any;                  //INSERT THIS LINE

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
  ngOnInit(): void {
    $('[data-widget="treeview"]').Treeview('init');
  }
}