release: 0.0.8 (chips, typeahead, splitter, tree, docs)

Author: angular-bootstrap

README.md

@@ -1,6 +1,6 @@
 # @angular-bootstrap/ngbootstrap
 
-Angular UI library providing datagrid, drag‑and‑drop, pagination, and stepper components with Bootstrap‑friendly styling.
+Angular UI library providing Datagrid, Drag‑and‑drop, Pagination, Stepper, Splitter, Tree, Typeahead, and Chips components with Bootstrap‑friendly styling.
 
 ## Features
 
@@ -10,8 +10,9 @@ Angular UI library providing datagrid, drag‑and‑drop, pagination, and steppe
 - Stepper – horizontal/vertical stepper with custom labels, error states, theming hooks, and keyboard support.
 - Splitter – resizable horizontal/vertical panes with collapsing, keyboard resizing, and ARIA semantics.
 - Tree – keyboard-accessible tree with optional checkboxes, JSON-style expanders, and expand/collapse helpers.
-- Typeahead – virtualized, debounced search with single/multi select, exact-match selection, and scroll hooks.
-- Angular + Bootstrap first – built for modern Angular (v17–20) and works with plain Bootstrap CSS; Material/Tailwind can be layered via custom styles.
+- Typeahead – Bootstrap dropdown overlay with debouncing, virtualization, single/multi select, chips/tags mode, custom templates, and Reactive Forms support.
+- Chips – small reusable chips/tags component used by Typeahead (can also be used standalone).
+- Angular + Bootstrap first – built for modern Angular (v21) and works with plain Bootstrap CSS; Material/Tailwind can be layered via custom styles.
 
 ## Installation
 
@@ -21,11 +22,12 @@ npm install @angular-bootstrap/ngbootstrap
 
 Make sure your app:
 
-- Uses Angular 17–20.
-- Includes Bootstrap CSS (for example in `angular.json` or global styles):
+- Uses Angular 21 (peer deps: `>=21 <22`).
+- Includes Bootstrap CSS + Bootstrap Icons (for example in `angular.json` or global styles):
 
 ```css
 @import 'bootstrap/dist/css/bootstrap.min.css';
+@import 'bootstrap-icons/font/bootstrap-icons.css';
 ```
 
 ## Usage overview
@@ -130,34 +132,6 @@ import { Component } from '@angular/core';
 import { NgbStepperComponent } from '@angular-bootstrap/ngbootstrap/stepper';
 import { NgbStepperStep } from '@angular-bootstrap/ngbootstrap/stepper';
 
-### Splitter
-
-```ts
-import { Component } from '@angular/core';
-import { NgbSplitterComponent, NgbSplitterPaneComponent } from '@angular-bootstrap/ngbootstrap/splitter';
-
-@Component({
-  standalone: true,
-  selector: 'app-splitter',
-  imports: [NgbSplitterComponent, NgbSplitterPaneComponent],
-  template: `
-    <ngb-splitter orientation="horizontal">
-      <ngb-splitter-pane size="30%" min="200px" [collapsible]="true" (collapsedChange)="onCollapse($event)">
-        <div class="p-3">Navigation</div>
-      </ngb-splitter-pane>
-      <ngb-splitter-pane>
-        <div class="p-3">Main content</div>
-      </ngb-splitter-pane>
-    </ngb-splitter>
-  `,
-})
-export class SplitterExampleComponent {
-  onCollapse(collapsed: boolean) {
-    // persist pane state if needed
-  }
-}
-```
-
 @Component({
   standalone: true,
   selector: 'app-wizard',
@@ -205,11 +179,29 @@ Stepper highlights:
 - Controlled navigation (`allowRevisit`, `next()`, `prev()`, `reset()` and events).
 - Theming hooks via `theme` and CSS classes (`bootstrap`, `material`, `tailwind`).
 
-### Drag & drop
+### Splitter
 
 ```ts
 import { Component } from '@angular/core';
-import { DndListDirective, DndItemDirective } from '@angular-bootstrap/ngbootstrap/drag-drop';
+import { NgbSplitterComponent, NgbSplitterPaneComponent } from '@angular-bootstrap/ngbootstrap/splitter';
+
+@Component({
+  standalone: true,
+  selector: 'app-splitter',
+  imports: [NgbSplitterComponent, NgbSplitterPaneComponent],
+  template: `
+    <ngb-splitter orientation="horizontal" [handleThickness]="10">
+      <ngb-splitter-pane size="25%" collapsible>
+        <div class="p-3">Navigation</div>
+      </ngb-splitter-pane>
+      <ngb-splitter-pane>
+        <div class="p-3">Main content</div>
+      </ngb-splitter-pane>
+    </ngb-splitter>
+  `,
+})
+export class SplitterExampleComponent {}
+```
 
 ### Tree
 
@@ -222,35 +214,73 @@ import { NgbTreeComponent, NgbTreeNode } from '@angular-bootstrap/ngbootstrap/tr
   selector: 'app-tree',
   imports: [NgbTreeComponent],
   template: `
-    <ngb-tree
-      [nodes]="nodes"
-      [showCheckbox]="true"
-      type="json"
-      (expand)="onExpand($event)"
-      (collapse)="onCollapse($event)"
-      (selectionChange)="onSelection($event)"
-    ></ngb-tree>
+    <ngb-tree [nodes]="nodes" type="default"></ngb-tree>
   `,
 })
 export class TreeExampleComponent {
   nodes: NgbTreeNode[] = [
-    {
-      id: 'parent',
-      label: 'Parent',
-      expanded: true,
-      children: [
-        { id: 'child-1', label: 'Child 1' },
-        { id: 'child-2', label: 'Child 2' },
-      ],
-    },
+    { id: 'a', label: 'Parent', expanded: true, children: [{ id: 'a-1', label: 'Child 1' }] },
   ];
+}
+```
+
+### Typeahead
+
+```ts
+import { Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { NgbTypeaheadComponent, NgbTypeaheadItem } from '@angular-bootstrap/ngbootstrap/typeahead';
 
-  onExpand(node: NgbTreeNode) {}
-  onCollapse(node: NgbTreeNode) {}
-  onSelection(selected: NgbTreeNode[]) {}
+@Component({
+  standalone: true,
+  selector: 'app-typeahead',
+  imports: [ReactiveFormsModule, NgbTypeaheadComponent],
+  template: `
+    <ngb-typeahead [data]="countries" [showDropdownButton]="true" [multiSelect]="true" [chips]="true"></ngb-typeahead>
+    <ngb-typeahead [data]="countries" [showDropdownButton]="true" [formControl]="country"></ngb-typeahead>
+  `,
+})
+export class TypeaheadExampleComponent {
+  country = new FormControl<string | null>('IN');
+  countries: NgbTypeaheadItem[] = [
+    { id: 'IN', label: 'India', value: 'IN' },
+    { id: 'US', label: 'United States', value: 'US' },
+  ];
 }
 ```
 
+### Chips
+
+```ts
+import { Component } from '@angular/core';
+import { NgbChipsComponent } from '@angular-bootstrap/ngbootstrap/chips';
+
+@Component({
+  standalone: true,
+  selector: 'app-chips',
+  imports: [NgbChipsComponent],
+  template: `
+    <ngb-chips [items]="items" (remove)="onRemove($event)"></ngb-chips>
+  `,
+})
+export class ChipsExampleComponent {
+  items = [
+    { id: 1, label: 'One' },
+    { id: 2, label: 'Two' },
+  ];
+
+  onRemove(item: { id: number; label: string }) {
+    this.items = this.items.filter((x) => x.id !== item.id);
+  }
+}
+```
+
+### Drag & drop
+
+```ts
+import { Component } from '@angular/core';
+import { DndListDirective, DndItemDirective } from '@angular-bootstrap/ngbootstrap/drag-drop';
+
 @Component({
   standalone: true,
   selector: 'app-drag-list',

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@angular-bootstrap/ngbootstrap",
-  "version": "0.0.7",
-  "description": "Angular UI library providing datagrid, drag-and-drop, pagination, and stepper components with Bootstrap-friendly styling.",
+  "version": "0.0.8",
+  "description": "Angular UI library providing datagrid, drag-and-drop, pagination, stepper, splitter, typeahead and chips components with Bootstrap-friendly styling.",
   "author": {
     "name": "Harmeet Singh"
   },

src/chips/index.ts

@@ -0,0 +1,2 @@
+export * from './public-api';
+

src/chips/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "ngbootstrap/chips",
+  "ngPackage": {
+    "lib": {
+      "entryFile": "index.ts"
+    }
+  }
+}
+

src/chips/public-api.ts

@@ -0,0 +1,2 @@
+export * from './src/chips/chips.component';
+

src/chips/src/chips/chips.component.ts

@@ -0,0 +1,89 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+export type NgbChip = {
+  id: string | number;
+  label: string;
+  disabled?: boolean;
+};
+
+@Component({
+  selector: 'ngb-chips',
+  standalone: true,
+  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+
+      .ngb-chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.35rem;
+        align-items: center;
+      }
+
+      .ngb-chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        max-width: 100%;
+      }
+
+      .ngb-chip-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .ngb-chip-remove {
+        border: 0;
+        background: transparent;
+        padding: 0;
+        line-height: 1;
+        cursor: pointer;
+        font-size: 1rem;
+        opacity: 0.85;
+      }
+
+      .ngb-chip-remove:disabled {
+        cursor: default;
+        opacity: 0.4;
+      }
+    `,
+  ],
+  template: `
+    <div class="ngb-chips" [attr.aria-label]="ariaLabel">
+      <span
+        *ngFor="let item of items; trackBy: trackById"
+        class="badge rounded-pill bg-secondary ngb-chip"
+        [class.opacity-50]="!!item.disabled"
+      >
+        <span class="ngb-chip-label">{{ item.label }}</span>
+        <button
+          *ngIf="removable"
+          type="button"
+          class="ngb-chip-remove"
+          [disabled]="!!item.disabled"
+          (click)="remove.emit(item)"
+          [attr.aria-label]="removeLabel || 'Remove'"
+        >
+          &times;
+        </button>
+      </span>
+    </div>
+  `,
+})
+export class NgbChipsComponent {
+  @Input() items: NgbChip[] = [];
+  @Input() removable = true;
+  @Input() ariaLabel?: string;
+  @Input() removeLabel?: string;
+
+  @Output() remove = new EventEmitter<NgbChip>();
+
+  trackById = (_: number, item: NgbChip) => item.id;
+}
+

src/index.ts

@@ -6,3 +6,4 @@ export * from './stepper';
 export * from './splitter';
 export * from './typeahead';
 export * from './tree';
+export * from './chips';

src/splitter/public-api.ts

@@ -1,2 +1,3 @@
-export * from './src/splitter/splitter.component';
-export * from './src/splitter/splitter.types';
+export { NgbSplitterComponent } from './src/splitter/splitter.component';
+export { NgbSplitterPaneComponent } from './src/splitter/splitter-pane.component';
+export { NgbSplitterOrientation, NgbSplitterPaneSize } from './src/splitter/splitter.types';

src/splitter/src/splitter/splitter-pane.component.spec.ts

@@ -0,0 +1,71 @@
+import { Component, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NgbSplitterPaneComponent } from './splitter-pane.component';
+
+@Component({
+  standalone: true,
+  imports: [NgbSplitterPaneComponent],
+  template: `
+    <ngb-splitter-pane
+      [collapsible]="collapsible"
+      [collapsed]="collapsed"
+      [scrollable]="scrollable"
+      (collapsedChange)="events.push($event)"
+    >
+      <div class="stub-content">Pane slot</div>
+    </ngb-splitter-pane>
+  `,
+})
+class HostComponent {
+  @ViewChild(NgbSplitterPaneComponent) pane!: NgbSplitterPaneComponent;
+  collapsible = true;
+  collapsed = false;
+  scrollable = true;
+  events: boolean[] = [];
+}
+
+describe('NgbSplitterPaneComponent', () => {
+  let fixture: ComponentFixture<HostComponent>;
+  let host: HostComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HostComponent);
+    host = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should expose its projected content through template', () => {
+    expect(host.pane.template).toBeTruthy();
+    const view = host.pane.template.createEmbeddedView(null);
+    view.detectChanges();
+    const wrapper = view.rootNodes[0] as HTMLElement | undefined;
+    const projected = wrapper?.querySelector?.('.stub-content') as HTMLElement | null | undefined;
+    expect(projected?.textContent).toContain('Pane slot');
+  });
+
+  it('should wire collapsedChange output', () => {
+    host.pane.collapsedChange.emit(true);
+    host.pane.collapsedChange.emit(false);
+    expect(host.events).toEqual([true, false]);
+  });
+
+  it('should render scrollable template wrapper', () => {
+    const view = host.pane.template.createEmbeddedView(null);
+    view.detectChanges();
+
+    const wrapper = view.rootNodes[0] as HTMLDivElement | undefined;
+    expect(wrapper?.style.overflow).toBe('auto');
+
+    host.scrollable = false;
+    fixture.detectChanges();
+    const viewAfter = host.pane.template.createEmbeddedView(null);
+    viewAfter.detectChanges();
+
+    const wrapperAfter = viewAfter.rootNodes[0] as HTMLDivElement | undefined;
+    expect(wrapperAfter?.style.overflow).toBe('hidden');
+  });
+});