Ng-bootstrapを使用したAngularアプリでのブートストラップの使用

ng-bootstrap は、最新バージョンのBootstrap（この記事の執筆時点では、 v4.0.0 alpha 6 ）をラップするコンポーネントとディレクティブのセットです。 これにより、AngularアプリでBootstrapを簡単に使用できるようになります。

ng-bootstrapを使用するには、 Angular4+が必要です。

ng-bootstrap は、使用可能なBootstrapのCSSに依存しますが、BootstrapJSまたはjQueryの依存関係は必要ありません。

必要なものをすべてプロジェクトにインストールし、FontAwesomeをミックスに追加しましょう。

$ npm install --save @ng-bootstrap/ng-bootstrap [email protected] font-awesome

または、ヤーンを使用したい場合：

$ yarn add @ng-bootstrap/ng-bootstrap [email protected] font-awesome

AngularアプリがAngularCLIプロジェクトであると仮定して、.angular-cli.jsonファイルのstyles配列に以下を追加するだけです。

"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css"

これにより、BootstrapとFontAwesomeのCSS依存関係が追加されます。 この時点で開発サーバーを再起動する必要がある場合があることに注意してください。

デモ

ng-bootstrapで使用できるカスタムコンポーネントとディレクティブの一部を示す例を次に示します。

<div class="jumbotron">
  <div class="container">
    <ngb-alert type="success" [dismissible]="false">
      Bootstrap is working!
    </ngb-alert>

    <h1>
      <i class="fa fa-bath" aria-hidden="true"></i>
      And so is Font Awesome!
    </h1>
  </div>
</div>

<div class="container">
  <p>
    A progress bar:
    <ngb-progressbar showValue="true" type="success" [value]="65">
    </ngb-progressbar>
  </p>
</div>

<div class="container">
  <ngb-tabset>
    <ngb-tab title="Bacon">
        <ng-template ngbTabContent>
          <p class="mt-4">Content for tab 1.
            <button type="button"
                    class="btn btn-secondary"
                    placement="bottom"
                    ngbPopover="A popover in tab 1"
                    popoverTitle="Bacon is good">
              Click me
            </button>
          </p>
        </ng-template>
      </ngb-tab>
      <ngb-tab title="Lettuce">
        <ng-template ngbTabContent>
          <p>Content for tab 2</p>
        </ng-template>
      </ngb-tab>
      <ngb-tab title="Tomatoes">
        <ng-template ngbTabContent>
          <p>Content for tab 3</p>
        </ng-template>
      </ngb-tab>
    </ngb-tabset>
</div>

ngb-alert 、 ngb-progressbar 、およびngb-tabsetコンポーネントの使用に注意してください。

コンポーネント

使用可能なコンポーネントの構文については、公式のng-bootstrapドキュメントを参照してください。