CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-ngx-bootstrap

Angular Bootstrap component library providing comprehensive UI components for Angular applications

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

NGX-Bootstrap

NGX-Bootstrap is a comprehensive Angular component library that provides Bootstrap 5 and Bootstrap 4 components for Angular applications. It offers a complete suite of UI components including modals, datepickers, dropdowns, tooltips, and more, all designed to integrate seamlessly with Angular's change detection and data binding systems.

Package Information

  • Package Name: ngx-bootstrap
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install ngx-bootstrap

Core Imports

NGX-Bootstrap uses modular imports, allowing you to import only the components you need:

import { AccordionModule } from 'ngx-bootstrap/accordion';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { TooltipModule } from 'ngx-bootstrap/tooltip';

For services and utilities:

import { BsModalService } from 'ngx-bootstrap/modal';
import { positionElements } from 'ngx-bootstrap/positioning';
import { parseDate, formatDate } from 'ngx-bootstrap/chronos';

Basic Usage

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

@Component({
  selector: 'app-example',
  template: `
    <!-- Accordion -->
    <accordion [closeOthers]="true">
      <accordion-panel heading="Panel 1" [isOpen]="true">
        Content for panel 1
      </accordion-panel>
      <accordion-panel heading="Panel 2">
        Content for panel 2
      </accordion-panel>
    </accordion>

    <!-- Modal trigger -->
    <button class="btn btn-primary" (click)="openModal()">
      Open Modal
    </button>
  `,
  imports: [AccordionModule]
})
export class ExampleComponent {
  modalRef?: BsModalRef;

  constructor(private modalService: BsModalService) {}

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

Architecture

NGX-Bootstrap is built around several key architectural patterns:

  • Modular Design: Each Bootstrap component is packaged as a separate Angular module for optimal tree-shaking
  • Configuration Services: Global configuration through injectable services (e.g., TooltipConfig, AccordionConfig)
  • Angular Integration: Full support for Angular's change detection, data binding, and dependency injection
  • Type Safety: Complete TypeScript definitions for all components, services, and interfaces
  • Bootstrap Compatibility: Supports both Bootstrap 4 and Bootstrap 5 styling
  • Positioning Engine: Advanced positioning calculations for overlays and popups
  • i18n Support: Extensive localization through the chronos date/time library

Capabilities

Interactive Components

Core interactive Bootstrap components including accordions, modals, dropdowns, and tabs.

// Accordion API
interface AccordionComponent {
  isAnimated: boolean;
  closeOthers: boolean;
}

interface AccordionPanelComponent {
  heading: string;
  isOpen: boolean;
  isDisabled: boolean;
  isOpenChange: EventEmitter<boolean>;
}

// Modal API
interface BsModalService {
  show<T>(component: ComponentType<T>, config?: Partial<ModalOptions>): BsModalRef<T>;
  hide(id?: number): void;
  getModalsCount(): number;
  onShow: EventEmitter<BsModalRef>;
  onShown: EventEmitter<BsModalRef>;
  onHide: EventEmitter<BsModalRef>;
  onHidden: EventEmitter<BsModalRef>;
}

interface BsModalRef<T = any> {
  content?: T;
  hide(): void;
  setClass(newClass: string): void;
}

Interactive Components

Form Controls

Advanced form controls including datepickers, timepickers, typeahead, and rating components.

// Datepicker API
interface BsDatepickerDirective {
  bsConfig: Partial<BsDatepickerConfig>;
  bsValue: Date | Date[];
  minDate: Date;
  maxDate: Date;
  dateCustomClasses: DatepickerDateCustomClasses[];
  daysDisabled: number[];
  datesDisabled: Date[];
  placement: 'top' | 'bottom' | 'left' | 'right';
  triggers: string;
  container: string;
  isDisabled: boolean;
  onShown: EventEmitter<BsDatepickerDirective>;
  onHidden: EventEmitter<BsDatepickerDirective>;
  bsValueChange: EventEmitter<Date>;
}

// Timepicker API
interface TimepickerComponent {
  hourStep: number;
  minuteStep: number;
  secondsStep: number;
  readonlyInput: boolean;
  disabled: boolean;
  mousewheel: boolean;
  arrowkeys: boolean;
  showSpinners: boolean;
  showSeconds: boolean;
  showMinutes: boolean;
  min: Date;
  max: Date;
}

Form Controls

Navigation & Layout

Navigation components including pagination, tabs, and carousel for content organization.

// Pagination API
interface PaginationComponent {
  align: boolean;
  boundaryLinks: boolean;
  directionLinks: boolean;
  disabled: boolean;
  firstText: string;
  lastText: string;
  maxSize: number;
  nextText: string;
  previousText: string;
  rotate: boolean;
  totalItems: number;
  itemsPerPage: number;
  numPages: EventEmitter<number>;
  pageChanged: EventEmitter<PageChangedEvent>;
}

// Carousel API
interface CarouselComponent {
  noWrap: boolean;
  noPause: boolean;
  showIndicators: boolean;
  interval: number;
  pauseOnFocus: boolean;
  indicatorsByChunk: boolean;
  itemsPerSlide: number;
  singleSlideOffset: boolean;
  activeSlideChange: EventEmitter<number>;
  slideRangeChange: EventEmitter<number[]>;
}

Navigation & Layout

Overlays & Popovers

Overlay components including tooltips, popovers, and dropdowns for contextual information.

// Tooltip API
interface TooltipDirective {
  tooltip: string | TemplateRef<any>;
  tooltipHtml: string | TemplateRef<any>;
  placement: string;
  triggers: string;
  container: string;
  isDisabled: boolean;
  delay: number;
  customClass: string;
  tooltipContext: any;
  tooltipPopupDelay: number;
  adaptivePosition: boolean;
  onShown: EventEmitter<TooltipDirective>;
  onHidden: EventEmitter<TooltipDirective>;
}

// Dropdown API
interface BsDropdownDirective {
  placement: 'top' | 'bottom' | 'left' | 'right';
  triggers: string;
  container: string;
  dropup: boolean;
  autoClose: boolean | 'outside' | 'inside';
  insideClick: boolean;
  isDisabled: boolean;
  onShown: EventEmitter<BsDropdownDirective>;
  onHidden: EventEmitter<BsDropdownDirective>;
  isOpenChange: EventEmitter<boolean>;
}

Overlays & Popovers

Utilities & Infrastructure

Core utilities for positioning, theming, date manipulation, and component loading.

// Positioning utilities
function positionElements(
  hostElement: HTMLElement,
  targetElement: HTMLElement,
  placement: string,
  appendToBody?: boolean
): { top: number; left: number };

// Date utilities (Chronos)
function parseDate(input: string, format?: string, locale?: string): Date;
function formatDate(date: Date, format: string, locale?: string): string;
function add(date: Date, amount: number, unit: TimeUnit): Date;
function subtract(date: Date, amount: number, unit: TimeUnit): Date;

// Theme utilities
function setTheme(theme: AvailableBsVersions): void;
function getBsVer(): IBsVersion;

// Component loading
interface ComponentLoader<T> {
  provide(component: ComponentType<T>): ComponentLoader<T>;
  to(container?: string): ComponentLoader<T>;
  position(opts?: PositioningOptions): ComponentLoader<T>;
  show(opts?: any): ComponentRef<T>;
  hide(): ComponentLoader<T>;
  dispose(): void;
}

Utilities & Infrastructure

Common Types

// Configuration interfaces
interface BsComponentConfig {
  placement?: string;
  triggers?: string;
  container?: string;
}

// Event types
interface PageChangedEvent {
  page: number;
  itemsPerPage: number;
}

// Date types
type TimeUnit = 'year' | 'quarter' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second' | 'millisecond';

interface DatepickerDateCustomClasses {
  date: Date;
  classes: string[];
}

// Modal types
interface ModalOptions {
  backdrop?: boolean | 'static';
  keyboard?: boolean;
  focus?: boolean;
  show?: boolean;
  ignoreBackdropClick?: boolean;
  class?: string;
  containerClass?: string;
  animated?: boolean;
  data?: any;
  initialState?: any;
  providers?: StaticProvider[];
  ariaDescribedby?: string;
  ariaLabelledBy?: string;
  ariaLabel?: string;
}

// Bootstrap version types
interface IBsVersion {
  isBs3: boolean;
  isBs4: boolean;
  isBs5: boolean;
}

type AvailableBsVersions = 'bs3' | 'bs4' | 'bs5';
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/ngx-bootstrap@20.0.x
Publish Source
CLI
Badge
tessl/npm-ngx-bootstrap badge