Сфокусировать первый индекс на всплывающих окнах и прокручивать всплывающие элементы с помощью клавиш со стрелками

Question

У меня есть кнопка из другого компонента, которая после щелчка по этому всплывающему окну отобразится. Я хочу, чтобы мой первый тег li был выделен и сфокусировался на отображаемых всплывающих окнах, и я хочу иметь возможность прокручивать, какой элемент выделен, с помощью клавиш со стрелками

Это мой прогресс для моего всплывающего компонента

https://stackblitz.com/edit/angular-ivy-4bfjkg?file=src%2Fapp%2Fapp.component.html

Это мой html файл

<div class="popup__list">
  <ul
    class="popup__list-item p-2"
    *ngFor="let a of listing; let i = index"
  >
    <li style="list-style:none" #list tabindex="-1" [ngClass]="{'selected' : i == 0}">
      {{ a?.FirstName }} {{ a?.LastName }}
    </li>
  </ul>
</div>

Это мой .ts файл

@ViewChild('list') list;



listing = [
    {
      FirstName: 'Jon',
      LastName: 'Doe'
    },
    {
      FirstName: 'Jon1',
      LastName: 'Doe1'
    },
    {
      FirstName: 'Jon2',
      LastName: 'Doe2'
    },
    {
      FirstName: 'Jon3',
      LastName: 'Doe3'
    },
    {
      FirstName: 'Jon4',
      LastName: 'Doe4'
    },
    {
      FirstName: 'Jon5',
      LastName: 'Doe5'
    },
    {
      FirstName: 'Jon6',
      LastName: 'Doe6'
    },
    {
      FirstName: 'Jon7',
      LastName: 'Doe7'
    },
    {
      FirstName: 'Jon8',
      LastName: 'Doe8'
    }
  ];



    ngAfterViewInit() {
        setTimeout(() => {
          this.list.nativeElement.focus();
        });
  }

а это мой css файл для изменения цвета при выборе

.popup__list {
 height: 200px;
  width: 200px;
  border: 1px solid red;
  overflow: auto;
}

.popup__list-item {
  background-color: ;
}

li {
list-style: none;  
}

.selected {
  background-color: salmon;
}