Как сделать загрузчик выпадающим без использования кнопки? (Угловой 4+)

Question

Я использую Angular 8, и мне нужно сделать простое выпадающее меню. У меня такой дизайн:

StackBlitz

Но единственное отличие состоит в том, что я не хочу использовать стиль кнопок, но мне нужен шеврон. Просто простое раскрывающееся меню, где я могу нажимать на различные ссылки внутри этого раскрывающегося списка.

Answer 1

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

Я добавил font-awesome css впроект, импортировав его в файл styles.css .

styles.css

/* Add application styles & imports to this file! */
@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css")

app-component.html

<div class="container" style="margin-top: 10%">
  <div class="btn-group" dropdown>
    <span id="button-basic" dropdownToggle aria-controls="dropdown-basic">
      <i class="fa fa-chevron-down"></i>
    </span>
    <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
        role="menu" aria-labelledby="button-basic">
      <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
      </li>
    </ul>
  </div>
</div>

Вы можете добавить любые дополнительные стили к шеврону, как вам нравится.