|
1 | 1 | # @angular-bootstrap/ngbootstrap |
2 | 2 |
|
3 | | -Angular UI library providing Datagrid, Drag‑and‑drop, Pagination, Stepper, Splitter, Tree, Typeahead, and Chips components with Bootstrap‑friendly styling. |
| 3 | +Standalone Angular UI components with Bootstrap-friendly styling. |
4 | 4 |
|
5 | | -## Features |
| 5 | +## What Is Included |
6 | 6 |
|
7 | | -- Datagrid – sortable, filterable, paginated, Sticky Header/Footer, Sticky Rows, Grid Styling, editable table with export (PDF/Excel) support and accessible templates. |
8 | | -- Drag & drop – lightweight list and item directives with keyboard‑friendly a11y helpers. |
9 | | -- Pagination – standalone Bootstrap‑styled pagination component. |
10 | | -- Stepper – horizontal/vertical stepper with custom labels, error states, theming hooks, and keyboard support. |
11 | | -- Splitter – resizable horizontal/vertical panes with collapsing, keyboard resizing, and ARIA semantics. |
12 | | -- Tree – keyboard-accessible tree with optional checkboxes, JSON-style expanders, and expand/collapse helpers. |
13 | | -- Typeahead – Bootstrap dropdown overlay with debouncing, virtualization, single/multi select, chips/tags mode, custom templates, and Reactive Forms support. |
14 | | -- Chips – small reusable chips/tags component used by Typeahead (can also be used standalone). |
15 | | -- Angular + Bootstrap first – built for modern Angular (v21) and works with plain Bootstrap CSS; Material/Tailwind can be layered via custom styles. |
| 7 | +- DataGrid |
| 8 | +- Pagination |
| 9 | +- Typeahead |
| 10 | +- Tree |
| 11 | +- Splitter |
| 12 | +- Stepper |
| 13 | +- Chips |
| 14 | +- Drag and drop |
16 | 15 |
|
17 | | -## Installation |
| 16 | +## Requirements |
18 | 17 |
|
19 | | -```bash |
20 | | -npm install @angular-bootstrap/ngbootstrap |
21 | | -``` |
22 | | - |
23 | | -Make sure your app: |
| 18 | +- Angular `>=21.0.0 <23.0.0` |
| 19 | +- RxJS `^7.8.0` |
| 20 | +- Bootstrap CSS in the consuming app |
| 21 | +- Bootstrap Icons when icon-based examples are used |
24 | 22 |
|
25 | | -- Uses Angular 21 (peer deps: `>=21 <22`). |
26 | | -- Includes Bootstrap CSS + Bootstrap Icons (for example in `angular.json` or global styles): |
| 23 | +## Install |
27 | 24 |
|
28 | | -```css |
29 | | -@import 'bootstrap/dist/css/bootstrap.min.css'; |
30 | | -@import 'bootstrap-icons/font/bootstrap-icons.css'; |
| 25 | +```bash |
| 26 | +npm install @angular-bootstrap/ngbootstrap bootstrap bootstrap-icons |
31 | 27 | ``` |
32 | 28 |
|
33 | | -## Usage overview |
34 | | - |
35 | | -All components are standalone, so you import them directly into your feature components. |
| 29 | +Optional integrations are installed only when you use those features: |
36 | 30 |
|
37 | | -Key datagrid capabilities: |
38 | | - |
39 | | -- Sorting (`enableSorting`, `sortChange`). |
40 | | -- Column/global filtering (`enableFiltering`, `enableGlobalFilter`, `filtersChange`). |
41 | | -- Pagination (`enablePagination`, `pageSize`, `pageChange`). |
42 | | -- Inline add/edit/delete (`enableAdd`, `enableEdit`, `enableDelete`, `rowAdd`, `rowSave`, `rowDelete`). |
43 | | -- Stable row identity via `trackBy` (defaults to index). |
44 | | -- Pluggable editing logic via `editService` (implement `NgbDatagridEditService`). |
45 | | -- Export to PDF/Excel via `exportOptions`. |
46 | | - |
47 | | -Export requires optional peer dependencies. Install only if you use export: |
48 | | - |
49 | | -```sh |
50 | | -npm install jspdf jspdf-autotable xlsx |
| 31 | +```bash |
| 32 | +npm install chart.js jspdf jspdf-autotable xlsx |
51 | 33 | ``` |
52 | 34 |
|
53 | | -Stepper highlights: |
54 | | - |
55 | | -- Horizontal/vertical variants via `orientation`. |
56 | | -- Custom labels with the `ngbStepLabel` directive. |
57 | | -- Label and content positioning (`labelPosition`, `contentPosition`). |
58 | | -- Error states and messages (`errorMessage` on steps). |
59 | | -- Controlled navigation (`allowRevisit`, `next()`, `prev()`, `reset()` and events). |
60 | | -- Theming hooks via `theme` and CSS classes (`bootstrap`, `material`, `tailwind`). |
61 | | - |
62 | | -Refer to the source under `src/drag-drop` and `src/datagrid`/`src/stepper` for full API details until a dedicated docs site is added. |
| 35 | +## Use |
| 36 | + |
| 37 | +Import standalone components directly in your Angular component. |
| 38 | + |
| 39 | +```ts |
| 40 | +import { Component } from '@angular/core'; |
| 41 | +import { NgbDatagridComponent, type ColumnDef } from '@angular-bootstrap/ngbootstrap'; |
| 42 | + |
| 43 | +@Component({ |
| 44 | + selector: 'app-users-grid', |
| 45 | + standalone: true, |
| 46 | + imports: [NgbDatagridComponent], |
| 47 | + template: ` |
| 48 | + <ngb-datagrid |
| 49 | + [data]="users" |
| 50 | + [columns]="columns" |
| 51 | + [enableSorting]="true" |
| 52 | + filterable="row" |
| 53 | + [enablePagination]="true" |
| 54 | + [pageSize]="10" |
| 55 | + /> |
| 56 | + `, |
| 57 | +}) |
| 58 | +export class UsersGridComponent { |
| 59 | + users = [ |
| 60 | + { id: 1, name: 'Ava Patel', role: 'Admin' }, |
| 61 | + { id: 2, name: 'Noah Chen', role: 'Editor' }, |
| 62 | + ]; |
| 63 | + |
| 64 | + columns: ColumnDef[] = [ |
| 65 | + { field: 'id', header: 'ID', type: 'number', width: 90, sortable: true }, |
| 66 | + { field: 'name', header: 'Name', type: 'text', sortable: true, filterable: true }, |
| 67 | + { field: 'role', header: 'Role', type: 'text', filterable: true }, |
| 68 | + ]; |
| 69 | +} |
| 70 | +``` |
63 | 71 |
|
64 | 72 | ## Development |
65 | 73 |
|
66 | | -Local setup: |
67 | | - |
68 | 74 | ```bash |
69 | | -npm install |
70 | | -npm run lint |
71 | | -npm test |
72 | | -npm run build |
| 75 | +pnpm install |
| 76 | +pnpm test |
| 77 | +pnpm build |
73 | 78 | ``` |
74 | 79 |
|
75 | | -- Build artefacts go to `dist/`. |
76 | | -- Tests are powered by Jest + `jest-preset-angular`. |
77 | | - |
78 | | -## Releasing |
79 | | - |
80 | | -Releases are automated via GitHub Actions: |
81 | | - |
82 | | -- Non‑`main` branches: |
83 | | - - `.github/workflows/ci.yml` runs install, tests, build only. |
84 | | -- `main` branch: |
85 | | - - `.github/workflows/release.yml` runs install, tests, build and publishes to npm using `NPM_TOKEN` from repository secrets. |
86 | | - |
87 | | -Recommended release flow: |
88 | | - |
89 | | -- On your local machine: |
90 | | - - Decide the new version (e.g. `1.1.0`). |
91 | | - - Run `npm version minor` or `npm version patch` to bump `package.json` and create the tag. |
92 | | - - Push the commit and tag: `git push origin main --tags`. |
93 | | -- GitHub Actions will build and publish that tagged version to npm. |
| 80 | +Build output is written to `dist/`. |
0 commit comments