jQueryを使わずにAngular8でBootstrap4のNavbarをToggleさせる

今回は、Bootstrapのナビゲーションバーで、トグルボタンを押してメニューを開閉させる方法を説明します。

環境
手順
まとめ

環境

Angular: 8.2.14
Angular CLI: 8.3.19
Node.js: 12.13.0
Bootstrap4が導入済み

手順

ナビゲーションバーを編集。

$ vi src/app/app.component.html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#"> Brand </a>

  <button class="navbar-toggler" type="button" (click)="toggleNavbar()">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" [ngClass]="{ 'show': navbarOpen }">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Item 1</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">Item 2</a>
      </li>
    </ul>
  </div>
</nav>

bootstrapのナビゲーションバーの開閉は、”navbar-toggler”クラスのボタンを押した際に、”collapse”クラスのdivに”show”クラスがついたり消えたりして動いています。

typescriptに、toggleNavbarを実装します。

$ vi src/app/app.component.ts

export class AppComponent {
  navbarOpen = false;

  toggleNavbar() {
    this.navbarOpen = !this.navbarOpen;
  }
}

toggleボタンが押されたら、navbarOpenに、true/falseが交互に代入されます。

画面を確認すると、下のようにナビゲーションバーが開閉できるようになっています。

まとめ

今回は、Angular8でBootstrap4を使って、ナビゲーションバーを開閉させる方法について説明しました。

Bootstrapの適用だけで、トグル機能をつけ忘れることがないよう注意しましょう。