[BUG] overlayScrollbars not working on the left menu.

[ChineseGhost]

Describe the bug I have integrated Admin LTE 3 with angular. The first component to be opened is the login component. After I click signin the web will load top navbar, left menu, footer and dashboard. When the loading complete the scrollbar of the left menu doesn't look like what it should be. I become a normal scrollbar but if I refresh the page of click inspect the web the scrollbar will changed. I try to reload the script 'overlayScrollbars' when the component loaded but it doesn't work.

To Reproduce Steps to reproduce the behavior:

1. Open the web and see the login page.
2. Click on 'signin'
3. See error

Expected behavior I just want the left menu scrollbar to be shown as in the demo of the page.

Screenshots First component is login component. Just click login.

After login web will load top nav bar, left menu, footer, dashboard but the scrollbar of the left menu is not change.

if I inspect the web or refresh the web the scrollbar is immediately changed.

Environment (please complete the following information):

• AdminLTE Version: [e.g. v3.0.2]
• Operating System: [e.g. Windows 10 Pro]
• Browser (Version): [e.g. Chrome (79.0.3945.130)]
• Angular Version: 8

Additional context Actually I have got some problem with this button also. It doesn't works when I click it and it happen the same time after I navigated from the login page.

But when the component is loadded I reload the script '' then it works fine. I try the same way with the scrollbar of the left menu by reload the script '' but it still doesn't work. Please advices. My english is not good if you don't understand, please ask for more information.

[REJack]

That's a normal behavior if you use AdminLTE with Angular, you need to init the scripts in your angular app. Checkout this issue.

[ChineseGhost]

That's a normal behavior if you use AdminLTE with Angular, you need to init the scripts in your angular app. Checkout this issue.

Could you please advice where and how to init this script '$('body').layout(); $('[data-toggle="push-menu"]').pushMenu(); $('[data-widget="tree"]').tree(); $('[data-toggle="control-sidebar"]').controlSidebar();'

Thanks

[REJack]

I personally doesn't use Angular, may here can help anyone else 😄 But this https://github.com/ColorlibHQ/AdminLTE/issues/2276 was also related to Angular.

[ChineseGhost]

I have found more bug according to the picture. After naviagted to the dashboard the overlayScrollbar is not working and if I click the dropdown menu then the page is reloaded immediately.

Still searching for the way to fix it. 🤔🤔🤔🤔

[REJack]

That sounds like you need to init the treeview too. 😄 Mostly you need to init the Layout & Treeview JS for Angular and may more if you want to use the other scripts too.

[ChineseGhost]

I have found the way. Just use window.location.href to move to dashboard instead of using nagivate then the script will be init again.

[haortizr]

That sounds like you need to init the treeview too. 😄 Mostly you need to init the Layout & Treeview JS for Angular and may more if you want to use the other scripts too.

In the version 3 no work . how can init the plugin in AdminlteV3?

try this: no work :( $('body').Layout(); $('[data-widget="pushmenu"]').PushMenu('init'); $('[data-widget="treeview"]').Treeview('init')

[ChineseGhost]

That sounds like you need to init the treeview too. smile Mostly you need to init the Layout & Treeview JS for Angular and may more if you want to use the other scripts too.

In the version 3 no work . how can init the plugin in AdminlteV3?

try this: no work :( $('body').Layout(); $('[data-widget="pushmenu"]').PushMenu('init'); $('[data-widget="treeview"]').Treeview('init')

Now I can do it. It works. I will show you the way later.

[ChineseGhost]

1. Create initMainPage.js in src/assets
2. Put this code in the File "use strict"; var App = { initMainPage: function () { $('body').Layout(); $('[data-toggle="push-menu"]').PushMenu(); // $('[data-widget="treeview"]').Treeview('init'); $('[data-widget="treeview"]').Treeview(); } }
3. In angular.json, import the file into the project.

4. In dashboardcomponent, followind the pic below.

declare const app, call app.initMainPage() in ngOnInit then it will works.

Thanks.

[TouaibiAla]

1. Create initMainPage.js in src/assets
2. Put this code in the File "use strict"; var App = { initMainPage: function () { $('body').Layout(); $('[data-toggle="push-menu"]').PushMenu(); // $('[data-widget="treeview"]').Treeview('init'); $('[data-widget="treeview"]').Treeview(); } }
3. In angular.json, import the file into the project.

1. In dashboardcomponent, followind the pic below.

declare const app, call app.initMainPage() in ngOnInit then it will works.

Thanks.

it's not worked for Admin Lte 3

[ChineseGhost]

1. Create initMainPage.js in src/assets
2. Put this code in the File "use strict"; var App = { initMainPage: function () { $('body').Layout(); $('[data-toggle="push-menu"]').PushMenu(); // $('[data-widget="treeview"]').Treeview('init'); $('[data-widget="treeview"]').Treeview(); } }
3. In angular.json, import the file into the project.

1. In dashboardcomponent, followind the pic below.

declare const app, call app.initMainPage() in ngOnInit then it will works. Thanks.

it's not worked for Admin Lte 3

I am using AdminLTE3. ^ ^

[crozz4]

1. Create initMainPage.js in src/assets
2. Put this code in the File "use strict"; var App = { initMainPage: function () { $('body').Layout(); $('[data-toggle="push-menu"]').PushMenu(); // $('[data-widget="treeview"]').Treeview('init'); $('[data-widget="treeview"]').Treeview(); } }
3. In angular.json, import the file into the project.

1. In dashboardcomponent, followind the pic below.

declare const app, call app.initMainPage() in ngOnInit then it will works.

Thanks.

Thanks for the detailed explanation and followed as mentioned. But I'm still facing some issues.

I'm using AdminLTE v3.0.2 with Angular: 9.0.6

As you can see above menues become overlapping. when adding $('[data-widget="treeview"]').Treeview('init'); Also the scrollbar not in stylish way.

[ChineseGhost]

I have change some thing a little bit.

try this. https://github.com/ChineseGhost/AdminLTE3-Angular

[crozz4]

I have change some thing a little bit.

try this. https://github.com/ChineseGhost/AdminLTE3-Angular

Thanks. But it also this issue. (overlapping third menu items.)

I'm using three levels in the sidebar. and this issue coming on when the third menu opens.

[gitcoderis]

Having the same issue.. none of the above answers solve this - 3rd level menu overlaps over menus. Is there a way how to solve this for angular?

[haidang]

I fixed issued with menu doesn't open after login. But now I have another issue when refresh dashboard, menu can open but doesn't close. I search more time but cannot find out solution.

[Nabinsharma123]

I fixed issued with menu doesn't open after login. But now I have another issue when refresh dashboard, menu can open but doesn't close. I search more time but cannot find out solution. @haidang did you find the solution?

[egemenagustos]

Hello, I solved the problem with the following steps, you do not need to install any additional packages. I applied these steps in angular 17. My HTML codes are :

<nav class="mt-2">
      <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
        <!-- Add icons to the links using the .nav-icon class
             with font-awesome or any other icon font library -->
        <li class="nav-item treeview" [class.menu-open.menu-is-opening]="itemStatus['item1']">
          <a style="cursor: pointer;" [routerLink]="" class="nav-link" (click)="toggleItem('item1')">
            <i class="nav-icon fas fa-regular fa-wallet" ></i>
            <p>
              Açık Bankacılık
              <i class="right fas fa-angle-left"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a [routerLink]="['/']" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Bakiye</p>
              </a>
            </li>
            <li class="nav-item">
              <a [routerLink]="['/account-activities']" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Hesap Hareketleri</p>
              </a>
            </li>
            <li class="nav-item">
              <a [routerLink]="['/cash-position']" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Nakit Durumu</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item" [class.menu-open.menu-is-opening]="itemStatus['item2']">
          <a style="cursor: pointer;" class="nav-link" (click)="toggleItem('item2')">
            <i class="nav-icon fas fa-regular fa-id-card"></i>
            <p>
              Personel Yönetimi
              <i class="right fas fa-angle-left"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a [routerLink]="['not-found']" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Personel</p>
              </a>
            </li>
            <li class="nav-item">
              <a [routerLink]="['not-found']" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Fazla Mesai Yönetimi</p>
              </a>
            </li>
            <li class="nav-item">
              <a [routerLink]="['not-found']" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Puantaj Cetveli</p>
              </a>
            </li>
            <li class="nav-item">
              <a [routerLink]="['not-found']" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Bordro Cetveli</p>
              </a>
            </li>
            <li class="nav-item">
              <a [routerLink]="['not-found']" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>İzinler</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item"  [class.menu-open.menu-is-opening]="itemStatus['item3']">
          <a style="cursor: pointer;" class="nav-link" (click)="toggleItem('item3')">
            <i class="nav-icon fas fa-solid fa-briefcase"></i>
            <p>
              Seyahat Yönetimi
              <i class="fas fa-angle-left right"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a [routerLink]="['not-found']" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Uçak</p>
              </a>
            </li>
            <li class="nav-item">
              <a [routerLink]="['not-found']" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Otel</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item" [class.menu-open.menu-is-opening]="itemStatus['item4']">
          <a style="cursor: pointer;" class="nav-link" (click)="toggleItem('item4')">
            <i class="nav-icon fas fa-solid fa-user"></i>
            <p>
              Memnuniyet Yönetimi
              <i class="fas fa-angle-left right"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a [routerLink]="['not-found']" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Şikayet Portalı</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item" [class.menu-open.menu-is-opening]="itemStatus['item5']">
          <a style="cursor: pointer;" class="nav-link" (click)="toggleItem('item5')">
            <i class="nav-icon fas fa-solid fa-user-tie"></i>
            <p>
              Admin
              <i class="fas fa-angle-left right"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a [routerLink]="['not-found']" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Kullanıcı Yönetimi</p>
              </a>
            </li>
            <li class="nav-item">
              <a [routerLink]="['not-found']" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Açık Bankacılık Yönetimi</p>
              </a>
            </li>
            <li class="nav-item">
              <a [routerLink]="['not-found']" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>Personel Yönetimi</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item">

          <a class="nav-link" (click)="logOut()" style="cursor: pointer;">
            <i class="nav-icon fas fa-arrow-right"></i>
            <p>
              Çıkış Yap
            </p>
          </a>
        </li>
      </ul>
    </nav>

The steps you need to do in the HTML section : li items should be to give a conditional css : <li class="nav-item treeview" [class.menu-open.menu-is-opening]="itemStatus['item1']"> Here are the steps you need to do in the Component section:

ngOnInit(): void {
    this.itemStatus['item1'] = false;
    this.itemStatus['item2'] = false;
    this.itemStatus['item3'] = false;
    this.itemStatus['item4'] = false;
    this.itemStatus['item5'] = false;
  }

  itemStatus: { [key: string]: boolean } = {};

  toggleItem(itemKey: string) {
    this.itemStatus[itemKey] = !this.itemStatus[itemKey];
  }

In general, we give conditional css and we provide it with an object. The reason why we give false to the values in ngOnInit is that the first values are undefined in the click event. In this way, by giving false, we ensure that it is both undefined and the menu is closed, and it fulfils our condition every time we click. I hope it will be useful. Good coding :)