or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

accordion.mdalert.mdcarousel.mddatepicker.mdfeedback.mdforms.mdindex.mdlayout.mdmodal.mdnavigation.md
tile.json

tessl/npm-ng-bootstrap--ng-bootstrap

Angular powered Bootstrap UI component library with comprehensive Bootstrap 5 components for Angular applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@ng-bootstrap/ng-bootstrap@19.0.x

To install, run

npx @tessl/cli install tessl/npm-ng-bootstrap--ng-bootstrap@19.0.0

index.mddocs/

@ng-bootstrap/ng-bootstrap

@ng-bootstrap/ng-bootstrap is a comprehensive Angular UI component library that provides native Angular implementations of Bootstrap 5 components. It offers 18 feature-rich modules with 150+ components, directives, and services, specifically designed for Angular applications with full TypeScript support, reactive forms integration, accessibility features, and Angular-specific optimizations.

Package Information

  • Package Name: @ng-bootstrap/ng-bootstrap
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @ng-bootstrap/ng-bootstrap
  • Dependencies: Angular 20.0.0+, Bootstrap 5.3.6 CSS (peer dependencies)

Core Imports

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

For individual modules:

import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbModalModule, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { NgbDatepickerModule, NgbDate } from '@ng-bootstrap/ng-bootstrap';

Basic Usage

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

@Component({
  selector: 'app-example',
  template: `
    <button class="btn btn-primary" (click)="openModal()">Open Modal</button>
    
    <ngb-accordion>
      <ngb-accordion-item id="item-1">
        <ngb-accordion-header>
          <button ngbAccordionButton>First Item</button>
        </ngb-accordion-header>
        <ngb-accordion-body>
          <p>Content for first accordion item</p>
        </ngb-accordion-body>
      </ngb-accordion-item>
    </ngb-accordion>
  `
})
export class ExampleComponent {
  constructor(private modalService: NgbModal) {}
  
  openModal() {
    this.modalService.open('Modal content');
  }
}

Architecture

@ng-bootstrap/ng-bootstrap is built around several key architectural patterns:

  • Module System: Each UI component is organized into its own Angular module (e.g., NgbAccordionModule, NgbModalModule)
  • Configuration Services: Global configuration through NgbConfig and component-specific configs (e.g., NgbAccordionConfig)
  • Service-Based Components: Complex components like modals and offcanvas use services for programmatic control
  • Template-Driven Components: Most components use Angular templates with structural directives
  • Type Safety: Full TypeScript support with strongly typed interfaces and generics
  • Accessibility First: Built-in ARIA attributes, keyboard navigation, and screen reader support

Global Configuration

NgbConfig Service

Controls global settings across all components.

class NgbConfig {
  animation: boolean; // Global animation toggle (default: true)
}

NgbModule

Main module that imports all component modules for convenience.

@NgModule({ imports: NGB_MODULES, exports: NGB_MODULES })
class NgbModule {}

Capabilities

Accordion Components

Collapsible content panels with smooth animations and keyboard navigation.

@Directive({
  selector: '[ngbAccordion]',
  exportAs: 'ngbAccordion'
})
class NgbAccordionDirective {
  @Input() animation: boolean;
  @Input() closeOthers: boolean;
  @Input() destroyOnHide: boolean;
  @Output() show: EventEmitter<string>;
  @Output() shown: EventEmitter<string>;
  @Output() hide: EventEmitter<string>;
  @Output() hidden: EventEmitter<string>;
  
  toggle(itemId: string): void;
  expand(itemId: string): void;
  expandAll(): void;
  collapse(itemId: string): void;
  collapseAll(): void;
  isExpanded(itemId: string): boolean;
}

Accordion Components

Alert Components

Contextual feedback messages for user actions.

@Component({
  selector: 'ngb-alert',
  exportAs: 'ngbAlert'
})
class NgbAlert {
  @Input() animation: boolean;
  @Input() dismissible: boolean;
  @Input() type: string;
  @Output() close: EventEmitter<void>;
}

Alert Components

Carousel Components

Interactive slideshow component for cycling through content.

@Component({
  selector: 'ngb-carousel',
  exportAs: 'ngbCarousel'
})
class NgbCarousel {
  @Input() animation: boolean;
  @Input() interval: number;
  @Input() pauseOnHover: boolean;
  @Input() wrap: boolean;
  @Output() slide: EventEmitter<NgbSlideEvent>;
  
  select(slideId: string): void;
  prev(): void;
  next(): void;
  pause(): void;
  cycle(): void;
}

interface NgbSlideEvent {
  prev: string;
  current: string;
  direction: NgbSlideEventDirection;
  source: NgbSlideEventSource;
}

Carousel Components

Datepicker Components

Comprehensive date selection with multiple calendar systems and internationalization.

@Component({
  selector: 'ngb-datepicker',
  exportAs: 'ngbDatepicker'
})
class NgbDatepicker {
  @Input() dayTemplate: TemplateRef<DayTemplateContext>;
  @Input() displayMonths: number;
  @Input() firstDayOfWeek: number;
  @Input() markDisabled: (date: NgbDate) => boolean;
  @Input() maxDate: NgbDate;
  @Input() minDate: NgbDate;
  @Input() navigation: 'select' | 'arrows' | 'none';
  @Input() outsideDays: 'visible' | 'collapsed' | 'hidden';
  @Input() showWeekNumbers: boolean;
  @Input() startDate: NgbDate;
  @Output() navigate: EventEmitter<NgbDatepickerNavigateEvent>;
  @Output() select: EventEmitter<NgbDate>;
  
  navigateTo(date?: NgbDate): void;
}

class NgbDate {
  readonly year: number;
  readonly month: number;
  readonly day: number;
  
  constructor(year: number, month: number, day: number);
  equals(other: NgbDate): boolean;
  before(other: NgbDate): boolean;
  after(other: NgbDate): boolean;
  toString(): string;
}

Datepicker Components

Modal Components

Service-based modal dialogs with backdrop and keyboard support.

@Injectable({ providedIn: 'root' })
class NgbModal {
  open(content: any, options?: NgbModalOptions): NgbModalRef;
  dismissAll(reason?: any): void;
}

class NgbModalRef {
  componentInstance?: any;
  result: Promise<any>;
  
  close(result?: any): void;
  dismiss(reason?: any): void;
  update(options: NgbModalUpdatableOptions): void;
}

interface NgbModalOptions {
  animation?: boolean;
  backdrop?: boolean | 'static';
  beforeDismiss?: () => boolean | Promise<boolean>;
  centered?: boolean;
  container?: string | Element;
  keyboard?: boolean;
  scrollable?: boolean;
  size?: 'sm' | 'lg' | 'xl';
  windowClass?: string;
}

Modal Components

Navigation Components

Flexible navigation components supporting tabs, pills, and custom layouts.

@Component({
  selector: '[ngbNav]',
  exportAs: 'ngbNav'
})
class NgbNav {
  @Input() activeId: any;
  @Input() animation: boolean;
  @Input() destroyOnHide: boolean;
  @Input() orientation: 'horizontal' | 'vertical';
  @Input() roles: 'tablist' | false;
  @Output() activeIdChange: EventEmitter<any>;
  @Output() navChange: EventEmitter<NgbNavChangeEvent>;
  
  select(id: any): void;
}

Navigation Components

Form Components

Enhanced form controls including rating, timepicker, and typeahead.

@Component({
  selector: 'ngb-rating',
  exportAs: 'ngbRating'
})
class NgbRating implements ControlValueAccessor {
  @Input() max: number;
  @Input() rate: number;
  @Input() readonly: boolean;
  @Input() resettable: boolean;
  @Input() starTemplate: TemplateRef<any>;
  @Output() hover: EventEmitter<number>;
  @Output() leave: EventEmitter<number>;
  @Output() rateChange: EventEmitter<number>;
}

@Component({
  selector: 'ngb-timepicker',
  exportAs: 'ngbTimepicker'
})
class NgbTimepicker implements ControlValueAccessor {
  @Input() meridian: boolean;
  @Input() spinners: boolean;
  @Input() seconds: boolean;
  @Input() hourStep: number;
  @Input() minuteStep: number;
  @Input() secondStep: number;
  @Input() readonlyInputs: boolean;
  @Input() size: 'small' | 'medium' | 'large';
}

Form Components

Feedback Components

User feedback components including alerts, toast notifications, tooltips, and popovers.

@Directive({
  selector: '[ngbTooltip]',
  exportAs: 'ngbTooltip'
})
class NgbTooltip {
  @Input() ngbTooltip: string | TemplateRef<any>;
  @Input() tooltipClass: string;
  @Input() placement: Placement;
  @Input() triggers: string;
  @Input() container: string;
  @Input() disableTooltip: boolean;
  @Output() shown: EventEmitter<void>;
  @Output() hidden: EventEmitter<void>;
  
  open(): void;
  close(): void;
  toggle(): void;
}

@Component({
  selector: 'ngb-toast',
  exportAs: 'ngbToast'
})
class NgbToast {
  @Input() animation: boolean;
  @Input() autohide: boolean;
  @Input() delay: number;
  @Input() header: string;
  @Output() hide: EventEmitter<void>;
  
  show(): void;
  hide(): void;
}

Feedback Components

Layout Components

Layout and navigation components including collapse, offcanvas, and pagination.

@Directive({
  selector: '[ngbCollapse]',
  exportAs: 'ngbCollapse'
})
class NgbCollapse {
  @Input() ngbCollapse: boolean;
  @Input() animation: boolean;
  @Output() ngbCollapseChange: EventEmitter<boolean>;
  
  toggle(): void;
}

@Injectable({ providedIn: 'root' })
class NgbOffcanvas {
  open(content: any, options?: NgbOffcanvasOptions): NgbOffcanvasRef;
  dismissAll(reason?: any): void;
}

Layout Components

Utility Types

type Placement = 
  | 'auto' | 'top' | 'bottom' | 'start' | 'left' | 'end' | 'right'
  | 'top-start' | 'top-left' | 'top-end' | 'top-right'
  | 'bottom-start' | 'bottom-left' | 'bottom-end' | 'bottom-right'
  | 'start-top' | 'left-top' | 'start-bottom' | 'left-bottom'
  | 'end-top' | 'right-top' | 'end-bottom' | 'right-bottom';

type PlacementArray = Placement[];

interface NgbDateStruct {
  year: number;
  month: number;
  day: number;
}

interface NgbTimeStruct {
  hour: number;
  minute: number;
  second: number;
}