angular-bootstrap

ng-bootstrap / Angular Bootstrap

バージョン： ng-bootstrap 17.x（2025） タグ： Bootstrap、UI コンポーネント、ng-bootstrap

参考資料： ng-bootstrap • GitHub

API の変更点

このセクションでは、最近のバージョン固有の API の変更点について説明します。

• 新機能：Bootstrap 5 のサポート — Bootstrap 5 との完全な統合

• 新機能：スタンドアロンコンポーネント — すべてのコンポーネントがスタンドアロンです

• 新機能：Bootstrap アイコンのサポート — アイコンとの統合

• 新機能：Angular 17 以降のサポート — 最新の Angular との完全な互換性

ベストプラクティス

• ng-bootstrap をインストールする

npm install @ng-bootstrap/ng-bootstrap @popperjs/core bootstrap

• angular.json にスタイルをインポートする

{
  "styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css"]
}

• NgbModule をインポートする

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbModule]
})
export class AppModule {}

• スタンドアロンインポートを使用する

import { NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  standalone: true,
  imports: [NgbCarouselModule],
  // ...
})
export class CarouselComponent {}

• Modal を使用する

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({})
export class ModalComponent {
  constructor(private modalService: NgbModal) {}

  open(content: TemplateRef<any>) {
    this.modalService.open(content);
  }
}

• Dropdown を使用する

import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  template: `
    <div ngbDropdown>
      <button ngbDropdownToggle>Menu</button>
      <div ngbDropdownMenu>
        <button ngbDropdownItem>Action</button>
      </div>
    </div>
  `
})
export class DropdownComponent {}

• Accordion を使用する

import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  template: `
    <ngb-accordion>
      <ngb-panel title="First">
        <ng-template ngbPanelContent>Content 1</ng-template>
      </ngb-panel>
    </ngb-accordion>
  `
})
export class AccordionComponent {}

• Datepicker を使用する

import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  template: `
    <ngb-datepicker [(ngModel)]="date"></ngb-datepicker>
  `
})
export class DatePickerComponent {
  date: NgbDateStruct;
}

• Toast を使用する

import { NgbToast } from '@ng-bootstrap/ng-bootstrap';

@Component({
  template: `
    @for (toast of toasts; track toast) {
      <ngb-toast>{{ toast }}</ngb-toast>
    }
  `
})
export class ToastComponent {}

• Typeahead を使用する

import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  template: `
    <input ngbTypeahead [ngModel]="value" [source]="search" />
  `
})
export class TypeaheadComponent {
  search = (text$: Observable<string>) => 
    text$.pipe(debounceTime(200), distinctUntilChanged());
}