title: ngx-bootstrap dropdowns nested submenu in mobile view
body: <p>I am trying to create a menu system in Angular that supports menus and submenus on both the left and right side, and looks good in mobile.  I've been able to get the furthest with ngx-bootstrap, I've tried a few other libraries with little success.</p>
  
  <p>The issue with the code I have is that when in mobile view, it's only partially working, the initial menus looks decent, but clicking on the menu is still creating a popup.  If I take out some of the container="body" params it works ok in mobile, but not in desktop.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-hmmqx1" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-hmmqx1</a></p>
  
  <p>menu.component.html</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-sm"&gt;
  &lt;button class="navbar-toggler navbar-toggler-right nav-link" (click)="isCollapsed = !isCollapsed" aria-expanded="false" aria-label="Toggle navigation"&gt;
      &lt;i class="fas fa-bars"&gt;Menu&lt;/i&gt;
  &lt;/button&gt;
  &lt;div class="navbar-collapse collapse" container="body" [collapse]="isCollapsed" id="navbarNavDropdown"&gt;
      &lt;ul class="navbar-nav col-md-12"&gt;
          &lt;li *ngFor="let menu of leftItems" class="nav-item"&gt;
              &lt;div *ngIf="!menu.items" container="body"&gt;
                  &lt;a *ngIf="!menu.items" class="nav-link" href="#"&gt;
                      &lt;i *ngIf="menu.icon" class="{{ menu.icon }}"&gt;&lt;/i&gt;{{ menu.label }}
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div *ngIf="menu.items" class="navbar-collapse collapse" dropdown container="body" [collapse]="isCollapsed"&gt;
                  &lt;a class="nav-link dropdown-toggle" dropdownToggle (click)="false" href="#"&gt;
                      &lt;i class="{{ menu.icon }}"&gt;&lt;/i&gt;{{ menu.label }}
                  &lt;/a&gt;
                  &lt;ul *dropdownMenu class="dropdown-menu"&gt;
                      &lt;ng-container  *ngFor="let item of menu.items"&gt;
                          &lt;li *ngIf="!item.items" role="menuitem"&gt;
                              &lt;a class="dropdown-item"&gt;
                                  &lt;i *ngIf="item.icon" class="{{ item.icon }}"&gt;&lt;/i&gt;{{item.label}}
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li *ngIf="item.items" role="menuitem" dropdown triggers="mouseover" placement="top right" container="body"&gt;
                              &lt;a class="dropdown-item" (click)="false"&gt;{{ item.label }}&lt;i class="fas fa-caret-right dropdown-submenu"&gt;&lt;/i&gt;&lt;/a&gt;
                              &lt;ul *dropdownMenu class="dropdown-menu" role="menu"&gt;
                                  &lt;ng-container  *ngFor="let submenu of item.items"&gt;
                                      &lt;li role="menuitem"&gt;
                                          &lt;a class="dropdown-item" href="#"&gt;
                                              &lt;i *ngIf="submenu.icon" class="{{ submenu.icon }}"&gt;&lt;/i&gt;{{ submenu.label }}
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li *ngIf="submenu.divider" class="divider dropdown-divider"&gt;&lt;/li&gt;
                                  &lt;/ng-container&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li *ngIf="item.divider" class="divider dropdown-divider"&gt;&lt;/li&gt;
                      &lt;/ng-container&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="nav-item ml-auto"&gt;&lt;/li&gt;
          &lt;li *ngFor="let menu of rightItems" class="nav-item"&gt;
              &lt;div *ngIf="!menu.items" container="body"&gt;
                  &lt;a *ngIf="!menu.items" class="nav-link" href="#"&gt;
                      &lt;i *ngIf="menu.icon" class="{{ menu.icon }}"&gt;&lt;/i&gt;{{ menu.label }}
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div *ngIf="menu.items" dropdown container="body" placement="bottom right"&gt;
                  &lt;a class="nav-link dropdown-toggle" dropdownToggle (click)="false" href="#"&gt;&lt;i class="{{ menu.icon }}"&gt;&lt;/i&gt;{{ menu.label }}&lt;/a&gt;
                  &lt;ul *dropdownMenu class="dropdown-menu dropdown-menu-right"&gt;
                      &lt;ng-container  *ngFor="let item of menu.items"&gt;
                          &lt;li *ngIf="!item.items" role="menuitem"&gt;
                              &lt;a class="dropdown-item"&gt;
                                  &lt;i *ngIf="item.icon" class="{{ item.icon }}"&gt;&lt;/i&gt;{{item.label}}
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li *ngIf="item.items" role="menuitem" dropdown triggers="mouseover" placement="top left" container="body"&gt;
                              &lt;a class="dropdown-item" (click)="false"&gt;&lt;i class="fas fa-caret-left dropdown-submenu-left"&gt;&lt;/i&gt;{{ item.label }}&lt;/a&gt;
                              &lt;ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu"&gt;
                                  &lt;ng-container  *ngFor="let submenu of item.items"&gt;
                                      &lt;li role="menuitem"&gt;
                                          &lt;a class="dropdown-item" href="#"&gt;
                                              &lt;i *ngIf="submenu.icon" class="{{ submenu.icon }}"&gt;&lt;/i&gt;{{ submenu.label }}
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li *ngIf="submenu.divider" class="divider dropdown-divider"&gt;&lt;/li&gt;
                                  &lt;/ng-container&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li *ngIf="item.divider" class="divider dropdown-divider"&gt;&lt;/li&gt;
                      &lt;/ng-container&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>menu.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
      selector: 'app-menu',
      templateUrl: './menu.component.html',
      styleUrls: ['./menu.component.scss'],
  })
  /**
   * Main Menu
   */
  
  export class MenuComponent implements OnInit {
      leftItems: any[];
      rightItems: any[];
      isCollapsed = true;
  
      ngOnInit(): void {
  
          this.leftItems = [
          {
              label: 'Single Item',
              routerLink: '/single'
          },
          {
              label: 'Left Menu',
              icon: 'fas fa-puzzle-piece',
              items: [
                  {label: 'Something', routerLink: '/something'
                  },
                  {label: 'Templates', routerLink: '/templates', divider: true},
                  {label: 'Proposals', routerLink: '/props'},
                  {label: 'Other Things', routerLink: '/other', divider: true},
                  {label: 'Submneu', items: this.getDynamicMenu() },               
                  {label: 'New Stuff', routerLink: '/new', icon: 'fas fa-plus'},                                                                                                          
                  ]
              },
          ];
  
          this.rightItems = [
              {
                  label: 'Help', icon: 'fas fa-life-ring',
                  items: [
                      {label: 'Help Docs', items: [{label: 'Submenu Test'}]}
                  ]
              }, {
                  label: 'User', icon: 'fas fa-user',
                  items: [
                      {label: 'Logout'}
                  ]
              },]
      }
  
      getDynamicMenu() {
          const testNames = ['Test1', 'Test2', 'Test3'];
          const dynamicSubmenu = [];
          for(const menuName of testNames) {
              dynamicSubmenu.push({label: 'Submenu - ' + menuName, routerLink: '/submenus/' + menuName.toLowerCase()});
          }
          return dynamicSubmenu
      }
  }
  </code></pre>