как я могу ограничить выбранный элемент раскрывающегося списка с помощью bootstrap4

Question

У меня проблема с моим раскрывающимся списком. Я не могу настроить выбранные элементы. Я пытался выполнить поиск, как ограничить выбор в раскрывающемся списке. Я не нашел решения. Итак, у меня есть 20 элементов для отображения в раскрывающемся списке, моя цель - показать только 5 элементов и выбранный элемент с именем «showMore», который после того, как я нажму на него, отобразит мне всплывающее окно, содержащее остальные мои элементы, например: mylist = [a , b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t] my_showing_list_in_dropdown = [a, b, c, d, e, showMore]

<div class="btn-group">
                <button type="button" class="btn btn-light dropdown-toggle dropbtn" data-toggle="dropdown" (click)="onUpdateData()">
                </button>

                <div class="dropdown-menu dropdown-menu-right dropdwn" >
                  <a
                    class="dropdown-item p-1 small "
                   *ngFor="let x of mylist" (click)="selectedItem(x,index)"
                    >
                    <span class="mr-2"
                      ><small style="color: gray;"
                        >{{x}}</small></span
                    >

                  </a>
                  <li class="divider"></li>
                  <a
                  class="dropdown-item p-1 small "
                  (click)="creation()"
                  >
                  <span class="mr-2"
                    ><small style="color: gray;"
                      >SHOW More</small></span
                  >

                </a>
                </div>
              </div>

Как это сделать?