title: ANGULAR ng-material-multilevel-menu, select next label with button in component
body: <p><a href="https://i.stack.imgur.com/ITZkK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ITZkK.png" alt="enter image description here" /></a>I downloaded ng material multilevel menu library. I want to create functionality that you can select next label (based on current selected label) on press of a button. Problem is that if label is closed, child items are not even in the DOM.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;ng-material-multilevel-menu [items]='appitems' [configuration]='config' (selectedItem)="selectedItem($event)"&gt;
      &lt;ng-template #listTemplate let-item="item" let-configuration="configuration"&gt;
          &lt;div class="my-cool-menu-item" [dir]="configuration.rtlLayout  ? 'rtl' : 'ltr'"&gt;
              &lt;div class="title-and-image"&gt;
                  &lt;div class="icon-container"&gt;
                      &lt;span [ngClass]="getClass(item)"&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="label-container"&gt;
                      &lt;span&gt;{{item.label}}&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="icon-arrow-container" *ngIf='item.hasChilden'&gt;
                  &lt;mat-icon *ngIf="!configuration.rtlLayout" [@ExpandedLTR]="item.expanded ? 'yes' : 'no'"&gt;
                      keyboard_arrow_down
                  &lt;/mat-icon&gt;
                  &lt;mat-icon *ngIf="configuration.rtlLayout" [@ExpandedRTL]="item.expanded ? 'yes' : 'no'"&gt;
                      keyboard_arrow_down
                  &lt;/mat-icon&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/ng-template&gt;
  &lt;/ng-material-multilevel-menu&gt;</code></pre>
  </div>
  </div>
  </p>