Угловое выпадающее меню исчезает

Я использую Angular 5.1.2 + Bootstrap 3.3.7 + ngx-bootstrap 2.0.0-rc.0. Я пытаюсь создать выпадающую страницу входа.

  <ul class="nav navbar-right">
        <li class="dropdown" dropdown>
          <a href="#" dropdownToggle class="dropdown-toggle" data-toggle="dropdown">
            <img src="assets/images/login_logo.png" alt="" class="img-responsive">
            </a>

          <!-- Dropdown Form -->
          <ul *dropdownMenu class="dropdown-menu" role="menu">
            <form class="form-group" action="index.html" method="post">
              <input class="form-control form-control-sm" type="text" placeholder="Enter your name">
              <input class="form-control form-control-lg" type="text" placeholder="Enter your name">
            </form>
          </ul>

Выпадающий список работает нормально, но проблема в том, что когда мы нажимаем на содержимое раскрывающегося списка (в данном случае это поле ввода), раскрывающийся список исчезает. Это потому, что когда мы нажимаем на него, вызов отправляется обратно в загрузчик, чтобы закрыть его, и это ожидаемое поведение. Чтобы предотвратить возврат вызова, мы должны использовать функцию jQuery:

$('.dropdown-menu input').click(function(e) {
        e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
    });

Однако я не хочу использовать jQuery с Angular. Есть ли другое доступное решение?