AngularでBootstrapを使う：ng-bootstrapとngx-bootstrap徹底比較

2024-04-02

AngularにおけるBootstrapライブラリ：ng-bootstrapとngx-bootstrapの違い

ng-bootstrap

特徴
- 軽量でシンプルなライブラリ
- Bootstrap 4のみをサポート
- 公式ドキュメントが充実
- アクティブな開発コミュニティ

特徴
- ng-bootstrapよりも多くのコンポーネントとディレクティブを提供
- Bootstrap 4とBootstrap 3をサポート
- テーマ機能搭載
- 商用利用可能なライセンス

ケース	おすすめライブラリ
シンプルなBootstrap機能のみ必要	ng-bootstrap
より多くのコンポーネント/ディレクティブが必要	ngx-bootstrap
Bootstrap 3をサポートしたい	ngx-bootstrap
テーマ機能を利用したい	ngx-bootstrap
商用利用する	ngx-bootstrap

その他の比較ポイント

項目	ng-bootstrap	ngx-bootstrap
ライセンス	MIT	MIT / 商用利用可能
スター数 (GitHub)	10,000+	24,000+
ダウンロード数 (npm)	400万+	1,200万+
アクティブな開発	活発	活発

どちらのライブラリもBootstrapをAngularプロジェクトで簡単に利用できるという利点があります。それぞれの特徴を理解し、プロジェクトのニーズに合致するものを選ぶことが重要です。

サンプルコード：ng-bootstrapとngx-bootstrap

ng-bootstrap

<button type="button" class="btn btn-primary" (click)="openModal()">Open modal</button>

<ng-template #modalContent>
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="modalRef.close()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Modal content</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="modalRef.close()">Close</button>
  </div>
</ng-template>

import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private modalService: NgbModal) {}

  ngOnInit() {}

  openModal() {
    this.modalService.open(this.modalContent);
  }
}

ngx-bootstrap

<button type="button" class="btn btn-primary" (click)="openModal()">Open modal</button>

<modal #modal [backdrop]="true" [keyboard]="true" (onClose)="modalClosed()">
  <modal-header>
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
      <span aria-hidden="true">&times;</span>
    </button>
  </modal-header>
  <modal-body>
    <p>Modal content</p>
  </modal-body>
  <modal-footer>
    <button type="button" class="btn btn-secondary" (click)="modal.close()">Close</button>
  </modal-footer>
</modal>

import { Component, OnInit } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  modalRef: BsModalRef;

  constructor(private modalService: BsModalService) {}

  ngOnInit() {}

  openModal() {
    this.modalRef = this.modalService.show(this.modal);
  }

  modalClosed() {
    this.modalRef = null;
  }
}