release: 0.0.10 updated the datagrid,added the editService for crud operations, resolve the security issue

Author: angular-bootstrap

README.md

@@ -39,6 +39,7 @@ All components are standalone, so you import them directly into your feature com
 ```ts
 import { Component } from '@angular/core';
 import { Datagrid } from '@angular-bootstrap/ngbootstrap/datagrid';
+import { NgbDatagridDefaultEditService } from '@angular-bootstrap/ngbootstrap/datagrid';
 
 interface User {
   id: number;
@@ -54,6 +55,8 @@ interface User {
     <ngb-datagrid
       [columns]="columns"
       [data]="rows"
+      [trackBy]="trackById"
+      [editService]="editService"
       [enableSorting]="true"
       [enableFiltering]="true"
       [enablePagination]="true"
@@ -63,6 +66,8 @@ interface User {
   `,
 })
 export class UsersComponent {
+  trackById = (_: number, row: User) => row.id;
+  editService = new NgbDatagridDefaultEditService<User>();
   columns = [
     { field: 'id', header: 'ID', sortable: true },
     { field: 'name', header: 'Name', sortable: true, filterable: true },
@@ -86,6 +91,8 @@ Key datagrid capabilities:
 - Column/global filtering (`enableFiltering`, `enableGlobalFilter`, `filtersChange`).
 - Pagination (`enablePagination`, `pageSize`, `pageChange`).
 - Inline add/edit/delete (`enableAdd`, `enableEdit`, `enableDelete`, `rowAdd`, `rowSave`, `rowDelete`).
+- Stable row identity via `trackBy` (defaults to index).
+- Pluggable editing logic via `editService` (implement `NgbDatagridEditService`).
 - Export to PDF/Excel via `exportOptions`.
 
 Export requires optional peer dependencies. Install only if you use export:
@@ -330,3 +337,7 @@ Recommended release flow:
   - Run `npm version minor` or `npm version patch` to bump `package.json` and create the tag.
   - Push the commit and tag: `git push origin main --tags`.
 - GitHub Actions will build and publish that tagged version to npm.
+
+## Keywords
+
+Keywords: ngbootstrap, angular bootstrap, bootstrap 5, angular components, UI library, datagrid, data grid, table, pagination, stepper, wizard, splitter, resizable panes, tree view, typeahead, autocomplete, chips, tags input, drag and drop, dnd, accessibility, a11y, ARIA, reactive forms, standalone components.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-bootstrap/ngbootstrap",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "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/datagrid/public-api.ts

@@ -12,4 +12,5 @@ export * from './src/directives/datagrid-templates.directive';
 export * from './src/datagrid.types'
 
 //service
-export * from './src/services/export.services'
+export * from './src/services/export.services'
+export * from './src/services/editing.service'

src/datagrid/src/datagrid/datagrid.component.spec.ts

@@ -203,13 +203,14 @@ describe('Datagrid', () => {
     component.enableEdit = true;
     component.startEdit(0);
     const emitSpy = jest.spyOn(component.rowSave, 'emit');
+    const originalRow = component.data[0];
 
     component.editForm.patchValue({ name: 'Alice Cooper' });
     component.saveEdit(0);
 
     expect(emitSpy).toHaveBeenCalledWith({
-      original: component.data[0],
-      updated: { ...component.data[0], name: 'Alice Cooper' },
+      original: originalRow,
+      updated: { ...originalRow, name: 'Alice Cooper' },
       index: 0
     });
     expect(component.editingIndex).toBeNull();
@@ -243,10 +244,75 @@ describe('Datagrid', () => {
     component.enableDelete = true;
     component.pageSize = 3; // ensure paged contains third entry
     const emitSpy = jest.spyOn(component.rowDelete, 'emit');
+    const deleted = component.data[2];
 
     component.deleteRow(2);
 
-    expect(emitSpy).toHaveBeenCalledWith({ row: component.data[2], index: 2 });
+    expect(emitSpy).toHaveBeenCalledWith({ row: deleted, index: 2 });
+    expect(component.data.find(r => r.id === deleted.id)).toBeDefined();
+  });
+
+  it('uses trackBy callback when provided', () => {
+    const row = component.data[0];
+    expect(component.trackRow(0, row)).toBe(0);
+
+    component.trackBy = (_i, r) => (r as any).id;
+    expect(component.trackRow(0, row)).toBe(1);
+  });
+
+  it('uses the custom editService when provided', () => {
+    const assignValues = jest.fn((row: any, patch: any) => ({ ...row, ...patch }));
+    const create = jest.fn(() => []);
+    const update = jest.fn(() => []);
+    const remove = jest.fn(() => []);
+    const saveChanges = jest.fn(() => []);
+    const cancelChanges = jest.fn(() => []);
+
+    component.editService = {
+      create,
+      update,
+      remove,
+      assignValues,
+      isNew: () => false,
+      hasChanges: () => false,
+      saveChanges,
+      cancelChanges,
+    } as any;
+
+    component.enableAdd = true;
+    component.startAdd();
+    expect(create).toHaveBeenCalled();
+    component.addForm.setValue({
+      id: 4,
+      name: 'Dana',
+      email: 'dana@example.com',
+      score: 50,
+      active: true,
+      created: '2024-04-01'
+    });
+    component.saveAdd();
+    expect(saveChanges).toHaveBeenCalled();
+    component.startAdd();
+    component.cancelAdd();
+    expect(cancelChanges).toHaveBeenCalled();
+
+    component.enableEdit = true;
+    component.startEdit(0);
+    component.editForm.patchValue({ name: 'Alice Cooper' });
+    component.saveEdit(0);
+
+    expect(assignValues).toHaveBeenCalled();
+    expect(update).toHaveBeenCalled();
+    expect(saveChanges).toHaveBeenCalled();
+
+    component.startEdit(0);
+    component.cancelEdit(0);
+    expect(cancelChanges).toHaveBeenCalled();
+
+    component.enableDelete = true;
+    component.pageSize = 3;
+    component.deleteRow(2);
+    expect(remove).toHaveBeenCalled();
   });
 
   it('cycles sort direction and emits sortChange', () => {
@@ -317,11 +383,13 @@ describe('Datagrid', () => {
   it('starts editing when row clicked outside interactive targets', () => {
     component.enableEdit = true;
     component.editOnRowClick = true;
+    const editSpy = jest.spyOn(component, 'startEdit');
     const target = document.createElement('div');
     const event = createEventForTarget(target);
 
     component.onRowClick(event, 0);
 
+    expect(editSpy).toHaveBeenCalledWith(0);
     expect(component.editingIndex).toBe(0);
   });
 
@@ -353,6 +421,16 @@ describe('Datagrid', () => {
     expect(component.isResponsiveEnabled()).toBe(false);
   });
 
+  it('validates email input with a safe check (guards extremely long values)', () => {
+    const emailCol = component.columns.find(c => c.field === 'email')!;
+    const draft: any = { email: '!@!.' + '!.'.repeat(20000) };
+    const errors: any = {};
+
+    component.validateInto(emailCol, draft, errors);
+
+    expect(errors.email).toBe('Invalid email');
+  });
+
   it('delegates export via triggerExport', () => {
     component.exportOptions.enabled = true;
     const exportSpy = jest.spyOn(component, 'export').mockResolvedValue();