I found a helpful article on creating collapsible menus and submenus using only Bootstrap and custom code for Angular 2, 4, 5, 6. I've been able to implement the logic successfully, but I'm facing an issue with multiple menus where clicking on another menu does not collapse the one that is already open. Additionally, when clicking on a submenu item, the main menu collapses instead of routing properly.
Here's a demo on StackBlitz: https://stackblitz.com/edit/angular-y3ud5q
submenu.component.html
<aside class="main-sidebar">
<section class="sidebar">
<ul class="sidebar-menu tree" data-widget="tree">
<li checkToggle *ngFor="let data of listsvalue ">
<a>
<span>{{data.value}}</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="nav submenu" data-widget="tree">
<li *ngFor="let test of data.value ">
<a>
<span>{{test.value}}</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
</li>
</ul>
</li>
</ul>
</section>
</aside>
submenu.directive.ts
@Directive({
selector: '[checkToggle]'
})
export class SidebarLeftToggleDirective {
@Input('checkToggle') partner;
/**
* @method constructor
* @param elementRef [description]
*/
constructor(public elementRef: ElementRef) { }
@HostBinding("class.active") isOpen = false;
@HostListener("click") toggleOpen($event) {
this.isOpen = !this.isOpen;
}
}
submenu.component.cs
.submenu li {
padding-left:15px;
}
ul li .submenu {
display: none;
}
ul li.active .submenu {
display: block;
list-style: none;
}