angular10にMarerial Desin Bootstrapを導入したいが、jqueryが反映されない

angular10にMDBをNPMで導入するため下記のサイトを参考にしました。

導入を正確に行った後、app.component.htmlにコードを記載しましたがドロップダウンメニューが開きません。

html
1<nav class="navbar navbar-expand-lg navbar-dark primary-color">
2
3  <!-- Navbar brand -->
4  <a class="navbar-brand" href="#"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">ナビバー</font></font></a>
5
6  <!-- Collapse button -->
7  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav" aria-expanded="false" aria-label="ナビゲーションを切り替え">
8      <span class="navbar-toggler-icon"></span>
9  </button>
10
11  <!-- Collapsible content -->
12  <div class="collapse navbar-collapse" id="basicExampleNav">
13
14      <!-- Links -->
15      <ul class="navbar-nav mr-auto">
16          <li class="nav-item active">
17              <a class="nav-link waves-effect waves-light" href="#">Home
18                  <span class="sr-only">(current)</span>
19              </a>
20          </li>
21          <li class="nav-item">
22              <a class="nav-link waves-effect waves-light" href="#">Features</a>
23          </li>
24          <li class="nav-item">
25              <a class="nav-link waves-effect waves-light" href="#">Pricing</a>
26          </li>
27
28          <!-- Dropdown -->
29          <li class="nav-item dropdown">
30              <a class="nav-link dropdown-toggle waves-effect waves-light" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
31              <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
32                  <a class="dropdown-item waves-effect waves-light" href="#">Action</a>
33                  <a class="dropdown-item waves-effect waves-light" href="#">Another action</a>
34                  <a class="dropdown-item waves-effect waves-light" href="#">Something else here</a>
35              </div>
36          </li>
37
38      </ul>
39      <!-- Links -->
40
41      <form class="form-inline">
42          <div class="md-form my-0">
43              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
44          </div>
45      </form>
46  </div>
47  <!-- Collapsible content -->
48
49</nav>

jQueryが機能していないのかと思われますが、解決方法がわかりません。
解決方法を教えていただけないでしょうか？

行動規範の内容に同意します

回答1件

以下のバージョンで確認してみました。

@angular/cli@10.1.7
angular-bootstrap-md@10.0.0

どうやらMDBでのDropdownの実装の仕方が間違っているようです。

公式のAngular Bootstrap Dropdownsを確認し、以下のように実装したところ、正常に動作しました。

HTML
1  <!-- Dropdown -->
2  <li class="nav-item" mdbDropdown>
3    <a class="nav-link dropdown-toggle waves-light"
4      mdbDropdownToggle mdbWavesEffect>Dropdown</a>
5    <div class="dropdown-menu dropdown-primary">
6      <a class="dropdown-item waves-effect waves-light" href="#">Action</a>
7      <a class="dropdown-item waves-effect waves-light" href="#">Another action</a>
8      <a class="dropdown-item waves-effect waves-light" href="#">Something else here</a>
9    </div>
10  </li>