Угловой 6 - Многоуровневый выбор выпадающего фокуса первого элемента

Question

Я работаю над угловым 6-уровневым выпадающим списком и не могу заставить фокусировку работать с первым элементом.

У меня есть кнопка (кнопка «Меню») в заголовке, и при нажатии на нее мне нужно показать список элементов, и каждый элемент может также иметь подэлементы.Таким образом, нужно будет показать стрелку, если есть подпункты, и при удерживании мыши над родительскими элементами, должны отображаться дочерние элементы, ....

Здесь я хочу, чтобы первый элемент был сфокусирован напо умолчанию после открытия раскрывающегося списка при нажатии кнопки (кнопка «Меню») для отображения элементов.

Кроме того, я хочу, чтобы клавиша табуляции работала без tabIndex = "0".Это значит, что я смогу перемещаться по пунктам один за другим, используя клавишу Tab.Навигация по клавише табуляции должна выглядеть следующим образом: первый элемент, 2-й элемент, 3-й элемент, ... Кроме того, если есть подпункты, следует перейти к подпунктам, завершить их и перейти к следующему основному элементу.

 <div id="showMenu">
      <ul class=""
          *ngIf="showMenu"
          role="menu">
        <li  *ngFor="let item of items">

          <a class=""
             (mouseenter)="mouseEnter(item)"
             (mouseleave)="mouseLeave(item)"
             (focus)="mouseEnter(item)"
             (keydown)="submenu(item.subItems)"
             role="menuitem">
            <span class="">{{item.name}}</span>
            <span class="nav__arrow" *ngIf="item.subItems"></span>
          </a>
           ....

событие нажатия клавиш здесь не работает.Любая подсказка здесь пожалуйста ...