angular-bootstrap

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

ng-bootstrap / Angular Bootstrap

Version: ng-bootstrap 17.x (2025) Tags: Bootstrap, UI Components, ng-bootstrap

References: ng-bootstrap • GitHub

版本： ng-bootstrap 17.x (2025) 标签： Bootstrap, UI组件, ng-bootstrap

参考链接： ng-bootstrap • GitHub

API Changes

API变更

This section documents recent version-specific API changes.

NEW: Bootstrap 5 support — Full Bootstrap 5 integration
NEW: Standalone components — All components are standalone
NEW: Bootstrap icons support — Icon integration
NEW: Angular 17+ support — Full compatibility with modern Angular

本节记录了近期特定版本的API变动。

新增：Bootstrap 5支持 — 完整集成Bootstrap 5
新增：独立组件 — 所有组件均为独立组件
新增：Bootstrap图标支持 — 图标集成
新增：Angular 17+支持 — 与现代版本Angular完全兼容

Best Practices

最佳实践

Install ng-bootstrap

bash

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

Import styles in angular.json

json

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

Import NgbModule

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

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

Use standalone import

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

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

Use Modal

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

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

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

Use 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 {}

Use 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 {}

Use Datepicker

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

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

Use Toast

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

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

Use 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());
}

安装ng-bootstrap

bash

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

在angular.json中导入样式

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());
}