How to toggle Admin LTE 3 sidebar manually in angular12?

user_8152794 0
Viewed 573

I have implemented Admin LTE 3 theme in my project and implemented.

layout.html

<div class="wrapper w-100">
<!-- Navbar -->
<app-header></app-header>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<app-sidebar></app-sidebar>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <router-outlet></router-outlet>
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<app-control-sidebar></app-control-sidebar>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<!-- <app-starter-footer></app-starter-footer> -->

sidebar.component.html

<aside class="main-sidebar sidebar-light-primary sidebar-no-expand" (mouseover)="removeCollapse($event)">
<!-- Brand Logo -->
<a href="/" class="brand-link border-0"> <span class="brand-text p-3 cl-font-weight-600">Logo</span> </a>
<!-- Sidebar -->

 // rest of the content here

header.component.html

<nav class="main-header navbar navbar-expand navbar-white navbar-light border-0">
<!-- Left navbar links -->
<ul class="navbar-nav align-items-center">
    <li class="nav-item"> <a class="nav-link h-auto" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> </li>
    <li class="nav-item d-none d-sm-inline-block"> <a href="/" class="nav-link nav-heading cl-font-weight-600 py-1">Discover</a> </li>
</ul>
<ul class="navbar-nav text-center mobile-logo">
    <li class="w-100">
        <p class="mb-0">Logo</p>
    </li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav align-items-center">
    <li class="nav-item">
        <a class="nav-link explainer-link d-flex" href="#"> <img src="assets/img/play-button.png" alt="" class="img-fluid">
            <p class="mb-0 ml-2">Explainer video</p>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link message-link d-flex align-items-center" href="#">
            <p class="message-text cl-anchor mb-0">Ask To Help</p> <img src="assets/img/message-img.png" alt="" class="img-fluid ml-2"> </a>
    </li>
</ul>

<div class="sidebar">

Now the problem here is that menu toggling is working fine if i clicked on Admin LTE provided theme toggle button. But sidebar collapsing is not working if i try to used it to my own button like this

<a class="nav-link" data-widget="control-sidebar" href="#">Toggle Control Sidebar</a>

If i tried above mentioned anchor tag method to toggle sidebar so another sidebar from rigth is toggle which i didn't implement. My own left sidebar is not toggling.

So can you help me out that how can i toggle AdminLTE-3 sidebar using my own custom button?. Is there any function through which i can toggle sidebar menu?

angular typescript
1 Answers

.html:

<a id="my-toggle-button" class="nav-link" data-widget="control-sidebar" (click)="toggleSideBar()">Toggle Control Sidebar</a>

.ts:

toggleSideBar() {
  $("#my-toggle-button").ControlSidebar('toggle');
}

Based on docs at https://adminlte.io/docs/3.0/javascript/control-sidebar.html

To be honest, you should be using @ViewChild here to access the HTML element but you may be restricted by your choice of library.

But seriously! This library is a really bad choice for a dashboard. Its old and jQuery focused. You want something tailored for Angular. Look at https://akveo.github.io/ngx-admin/.

According to https://risingstars.js.org/2020/en#section-angular ngx-admin is the #1 Angular library and will make your life much easier.

user_12058710
Related