Как обменять jQuery-скрипт на выпадающий с Angular2 +?

Question

У меня уже был другой вопрос по этой теме> Выпадающий список в Angular6 с Bootstrap 4.1.3 не работает

Там я пришел к следующему решению, но я хотел бы знать, как заменить эти сценарии собственным кодом Angular.

старое решение : HTML + добавление скриптов в index.html приложения angular-*

<nav class="navbar navbar-light bg-light mb-5 fixed-top">
      <a class="navbar-brand" href="#">Title</a>
        <div class="navbar-expand mr-auto">
        <div class="navbar-nav">
          <ul class="nav nav-pills">
            <li class="nav-item">
              <a class="nav-link" routerLink="/dashboard">Main Page</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLink="/about">About</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="navbar-expand ml-auto">
        <div class="navbar-nav">
          <ul class="nav nav-pills">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">Login</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" routerLink="/signin">My Profile</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" routerLink="/signup">Register</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>

и в index.html я добавил эти сценарии.

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>