@handsontable/angular-wrapper 17.0.1 → 17.1.0-rc10

package/README.md

@@ -55,6 +55,9 @@
 &nbsp;&nbsp;✅&nbsp; [Hiding columns](https://handsontable.com/docs/angular-data-grid/column-hiding/) <br>
 &nbsp;&nbsp;✅&nbsp; [Right-click context menu](https://handsontable.com/docs/angular-data-grid/context-menu/) <br>
 &nbsp;&nbsp;✅&nbsp; [Row pagination](https://handsontable.com/docs/angular-data-grid/rows-pagination/) <br>
+&nbsp;&nbsp;✅&nbsp; [Server-side data](https://handsontable.com/docs/angular-data-grid/server-side-data/) <br>
+&nbsp;&nbsp;✅&nbsp; [Notifications](https://handsontable.com/docs/angular-data-grid/notification/) <br>
+&nbsp;&nbsp;✅&nbsp; [Export to Excel](https://handsontable.com/docs/angular-data-grid/export-to-excel/) <br>
 
 <div id="installation">
 
@@ -134,6 +137,77 @@ export class HotTableWrapperComponent {
 
 <br>
 
+## ⏳ Lazy loading with `@defer` (Angular 17+)
+
+`HotTableComponent` is a standalone component and works with Angular's built-in
+`@defer` block out of the box — no extra configuration required.
+
+### Recommended pattern
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HotTableComponent } from '@handsontable/angular-wrapper';
+
+@Component({
+  standalone: true,
+  imports: [HotTableComponent],
+  template: `
+    <button (click)="show.set(true)">Load grid</button>
+
+    @defer (when show()) {
+      <hot-table [data]="data" [settings]="settings"></hot-table>
+    } @placeholder {
+      <p>Click the button to load the grid.</p>
+    } @loading (minimum 300ms) {
+      <p>Loading…</p>
+    } @error {
+      <p>Failed to load the grid.</p>
+    }
+  `,
+})
+export class PageComponent {
+  show = signal(false);
+  data = [['Alice', 'has'], ['Bob', 'data']];
+  settings = { rowHeaders: true, colHeaders: ['Name', 'Note'] };
+}
+```
+
+### How it works
+
+| Block | When shown |
+|---|---|
+| `@defer (when show())` | renders `<hot-table>` after the signal becomes `true` |
+| `@placeholder` | shown immediately before the trigger fires |
+| `@loading (minimum 300ms)` | shown while the JS chunk is being fetched |
+| `@error` | shown if the dynamic import fails |
+
+### Other trigger options
+
+```html
+<!-- on viewport — loads when the placeholder scrolls into view -->
+@defer (on viewport) { <hot-table …> }
+
+<!-- on interaction — loads on first click/focus inside the placeholder -->
+@defer (on interaction) { <hot-table …> }
+
+<!-- on idle — loads during browser idle time -->
+@defer (on idle) { <hot-table …> }
+```
+
+### Important: `registerAllModules()`
+
+Call `registerAllModules()` in `app.config.ts` **before** the deferred block
+triggers — it is synchronous and must run before any Handsontable instance is
+created. The recommended place is at module level, outside any component:
+
+```ts
+// app.config.ts
+import { registerAllModules } from 'handsontable/registry';
+registerAllModules(); // runs once at app startup, safe with @defer
+```
+
+<br>
+
 ## 🎨 Themes
 
 Handsontable themes control how your data table looks: colors, spacing, typography, borders, and overall visual style.

package/fesm2022/handsontable-angular-wrapper.mjs

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
-import { ViewContainerRef, Component, ChangeDetectionStrategy, Input, ViewChild, createComponent, EventEmitter, Directive, HostBinding, Output, Injectable, InjectionToken, Inject, ViewEncapsulation, NgModule } from '@angular/core';
+import { ViewContainerRef, ViewChild, Input, ChangeDetectionStrategy, Component, createComponent, EventEmitter, Output, HostBinding, Directive, Injectable, InjectionToken, Inject, ViewEncapsulation, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import Handsontable from 'handsontable/base';
-import { take } from 'rxjs/operators';
+import { take, skip } from 'rxjs/operators';
 import { editorFactory } from 'handsontable/editors/factory';
 import { baseRenderer, rendererFactory, registerRenderer } from 'handsontable/renderers';
 import { BehaviorSubject } from 'rxjs';
@@ -42,8 +43,8 @@ class CustomEditorPlaceholderComponent {
     detachEditor() {
         this.container.detach();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomEditorPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomEditorPlaceholderComponent, selector: "ng-component", inputs: { top: "top", left: "left", height: "height", width: "width", isVisible: "isVisible", placeholderCustomClass: "placeholderCustomClass", componentRef: "componentRef" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["inputPlaceholder"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: ` <div
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CustomEditorPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: CustomEditorPlaceholderComponent, isStandalone: true, selector: "ng-component", inputs: { top: "top", left: "left", height: "height", width: "width", isVisible: "isVisible", placeholderCustomClass: "placeholderCustomClass", componentRef: "componentRef" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["inputPlaceholder"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: ` <div
     [class]="placeholderCustomClass"
     [style.display]="display"
     [style.width.px]="width"
@@ -56,7 +57,7 @@ class CustomEditorPlaceholderComponent {
     <ng-template #inputPlaceholder></ng-template>
   </div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomEditorPlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CustomEditorPlaceholderComponent, decorators: [{
             type: Component,
             args: [{
                     template: ` <div
@@ -72,7 +73,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     <ng-template #inputPlaceholder></ng-template>
   </div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: false,
+                    standalone: true,
                 }]
         }], propDecorators: { top: [{
                 type: Input
@@ -297,14 +298,16 @@ class HotCellRendererComponent {
     getProps() {
         return this.cellProperties?.rendererProps ?? {};
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HotCellRendererComponent, selector: "hot-cell-renderer", inputs: { value: "value", instance: "instance", td: "td", row: "row", col: "col", prop: "prop", cellProperties: "cellProperties" }, ngImport: i0, template: `<!-- This is an abstract component. Extend this component and provide your own template. -->`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: HotCellRendererComponent, isStandalone: true, selector: "hot-cell-renderer", inputs: { value: "value", instance: "instance", td: "td", row: "row", col: "col", prop: "prop", cellProperties: "cellProperties" }, ngImport: i0, template: `<!-- This is an abstract component. Extend this component and provide your own template. -->`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotCellRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotCellRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'hot-cell-renderer',
-                    template: `<!-- This is an abstract component. Extend this component and provide your own template. -->`
+                    template: `<!-- This is an abstract component. Extend this component and provide your own template. -->`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { value: [{
                 type: Input
@@ -379,10 +382,10 @@ class HotCellEditorComponent {
     setValue(value) {
         this._value = value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HotCellEditorComponent, inputs: { row: "row", column: "column", prop: "prop", originalValue: "originalValue", cellProperties: "cellProperties" }, outputs: { finishEdit: "finishEdit", cancelEdit: "cancelEdit" }, host: { properties: { "attr.tabindex": "this.tabindex", "attr.data-hot-input": "this.dataHotInput", "class.handsontableInput": "this.handsontableInputClass", "style.height.%": "this.heightFitParentContainer", "style.width.%": "this.widthFitParentContainer" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: HotCellEditorComponent, isStandalone: true, inputs: { row: "row", column: "column", prop: "prop", originalValue: "originalValue", cellProperties: "cellProperties" }, outputs: { finishEdit: "finishEdit", cancelEdit: "cancelEdit" }, host: { properties: { "attr.tabindex": "this.tabindex", "attr.data-hot-input": "this.dataHotInput", "class.handsontableInput": "this.handsontableInputClass", "style.height.%": "this.heightFitParentContainer", "style.width.%": "this.widthFitParentContainer" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotCellEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotCellEditorComponent, decorators: [{
             type: Directive
         }], propDecorators: { tabindex: [{
                 type: HostBinding,
@@ -514,8 +517,8 @@ function applyPropsToEditor(editor) {
     editor._componentRef.setInput('cellProperties', editor.cellProperties);
     const rect = editor.hot.getCell(editor.row, editor.col)?.getBoundingClientRect();
     editor._editorPlaceHolderRef.setInput('placeholderCustomClass', '');
-    editor._editorPlaceHolderRef.setInput('height', rect.height);
-    editor._editorPlaceHolderRef.setInput('width', rect.width);
+    editor._editorPlaceHolderRef.setInput('height', rect?.height ?? 0);
+    editor._editorPlaceHolderRef.setInput('width', rect?.width ?? 0);
     editor._editorPlaceHolderRef.setInput('isVisible', true);
     editor._editorPlaceHolderRef.setInput('componentRef', editor._componentRef);
     editor._editorPlaceHolderRef.changeDetectorRef.detectChanges();
@@ -579,14 +582,16 @@ class HotCellRendererAdvancedComponent {
     getProps() {
         return this.cellProperties?.rendererProps ?? {};
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotCellRendererAdvancedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HotCellRendererAdvancedComponent, selector: "hot-cell-renderer-advanced", inputs: { value: "value", instance: "instance", td: "td", row: "row", col: "col", prop: "prop", cellProperties: "cellProperties" }, ngImport: i0, template: `<!-- This is an abstract component. Extend this component and provide your own template. -->`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotCellRendererAdvancedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: HotCellRendererAdvancedComponent, isStandalone: true, selector: "hot-cell-renderer-advanced", inputs: { value: "value", instance: "instance", td: "td", row: "row", col: "col", prop: "prop", cellProperties: "cellProperties" }, ngImport: i0, template: `<!-- This is an abstract component. Extend this component and provide your own template. -->`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotCellRendererAdvancedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotCellRendererAdvancedComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'hot-cell-renderer-advanced',
                     template: `<!-- This is an abstract component. Extend this component and provide your own template. -->`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { value: [{
                 type: Input
@@ -667,10 +672,10 @@ class HotCellEditorAdvancedComponent {
     afterInit(editor) { }
     /** Lifecycle hook called before the editor is opened. Available in advanced mode. */
     beforeOpen(editor, { row, col, prop, td, originalValue, cellProperties, }) { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotCellEditorAdvancedComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HotCellEditorAdvancedComponent, inputs: { row: "row", column: "column", prop: "prop", originalValue: "originalValue", cellProperties: "cellProperties" }, outputs: { finishEdit: "finishEdit", cancelEdit: "cancelEdit" }, host: { properties: { "style.height.%": "this.heightFitParentContainer", "style.width.%": "this.widthFitParentContainer" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotCellEditorAdvancedComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: HotCellEditorAdvancedComponent, isStandalone: true, inputs: { row: "row", column: "column", prop: "prop", originalValue: "originalValue", cellProperties: "cellProperties" }, outputs: { finishEdit: "finishEdit", cancelEdit: "cancelEdit" }, host: { properties: { "style.height.%": "this.heightFitParentContainer", "style.width.%": "this.widthFitParentContainer" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotCellEditorAdvancedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotCellEditorAdvancedComponent, decorators: [{
             type: Directive
         }], propDecorators: { heightFitParentContainer: [{
                 type: HostBinding,
@@ -851,7 +856,7 @@ class DynamicComponentService {
             environmentInjector: this.environmentInjector,
         });
         Object.keys(rendererParameters).forEach((key) => {
-            if (rendererParameters.hasOwnProperty(key)) {
+            if (Object.prototype.hasOwnProperty.call(rendererParameters, key)) {
                 componentRef.setInput(key, rendererParameters[key]);
             }
             else {
@@ -881,67 +886,56 @@ class DynamicComponentService {
         this.appRef.detachView(componentRef.hostView);
         componentRef.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicComponentService, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicComponentService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DynamicComponentService, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DynamicComponentService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicComponentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DynamicComponentService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }]; } });
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }] });
 
-const AVAILABLE_OPTIONS = Object.keys(Handsontable.DefaultSettings);
-const AVAILABLE_HOOKS = Handsontable.hooks.getRegistered();
+const AVAILABLE_HOOKS_SET = new Set(Handsontable.hooks.getRegistered());
 /**
  * Service to resolve and apply custom settings for Handsontable settings object.
  */
 class HotSettingsResolver {
     dynamicComponentService;
     environmentInjector;
-    constructor(dynamicComponentService, environmentInjector) {
+    ngZone;
+    constructor(dynamicComponentService, environmentInjector, ngZone) {
         this.dynamicComponentService = dynamicComponentService;
         this.environmentInjector = environmentInjector;
+        this.ngZone = ngZone;
     }
     /**
      * Applies custom settings to the provided GridSettings.
      * @param settings The original grid settings.
-     * @param ngZone The NgZone instance to run hooks inside the zone context.
      * @returns The merged grid settings with custom settings applied.
      */
-    applyCustomSettings(settings, ngZone) {
+    applyCustomSettings(settings) {
         const mergedSettings = settings;
         this.updateColumnRendererForGivenCustomRenderer(mergedSettings);
         this.updateColumnEditorForGivenCustomEditor(mergedSettings);
         this.updateColumnValidatorForGivenCustomValidator(mergedSettings);
-        this.wrapHooksInNgZone(mergedSettings, ngZone);
+        this.wrapHooksInNgZone(mergedSettings);
         return mergedSettings ?? {};
     }
     /**
      * Ensures that hook callbacks in the provided grid settings run inside Angular's zone.
      *
      * @param settings The original grid settings.
-     * @param ngZone The NgZone instance to run hooks inside the zone context.
      */
-    wrapHooksInNgZone(settings, ngZone) {
-        const options = AVAILABLE_HOOKS.concat(AVAILABLE_OPTIONS);
-        options.forEach((key) => {
-            const isHook = AVAILABLE_HOOKS.indexOf(key) > -1;
-            let option;
-            if (isHook) {
-                option = settings[key];
-            }
-            if (option === void 0) {
-                return;
-            }
-            else if (!!ngZone && typeof option === 'function' && isHook) {
+    wrapHooksInNgZone(settings) {
+        const ngZone = this.ngZone;
+        AVAILABLE_HOOKS_SET.forEach((key) => {
+            const option = settings[key];
+            if (typeof option === 'function') {
                 settings[key] = function (...args) {
                     return ngZone.run(() => option.apply(this, args));
                 };
             }
-            else {
-                settings[key] = option;
-            }
         });
     }
     /**
@@ -1044,12 +1038,12 @@ class HotSettingsResolver {
             this.isTemplateRef(renderer) ||
             this.isAdvancedRendererComponentRefType(renderer);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotSettingsResolver, deps: [{ token: DynamicComponentService }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotSettingsResolver });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotSettingsResolver, deps: [{ token: DynamicComponentService }, { token: i0.EnvironmentInjector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotSettingsResolver });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotSettingsResolver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotSettingsResolver, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: DynamicComponentService }, { type: i0.EnvironmentInjector }]; } });
+        }], ctorParameters: () => [{ type: DynamicComponentService }, { type: i0.EnvironmentInjector }, { type: i0.NgZone }] });
 
 /**
  * A constant representing the non-commercial and evaluation license.
@@ -1090,9 +1084,7 @@ class HotGlobalConfigService {
      * @private
      * @type {HotGlobalConfig}
      */
-    defaultConfig = {
-        license: undefined,
-    };
+    defaultConfig = {};
     /**
      * A BehaviorSubject that holds the current Handsontable configuration.
      *
@@ -1142,54 +1134,50 @@ class HotGlobalConfigService {
     resetConfig() {
         this.configSubject.next({ ...this.defaultConfig });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotGlobalConfigService, deps: [{ token: HOT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotGlobalConfigService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotGlobalConfigService, deps: [{ token: HOT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotGlobalConfigService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotGlobalConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotGlobalConfigService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [HOT_GLOBAL_CONFIG]
-                }] }]; } });
+                }] }] });
 
-const HOT_DESTROYED_WARNING = 'The Handsontable instance bound to this component was destroyed and cannot be' + ' used properly.';
+const HOT_DESTROYED_WARNING = 'The Handsontable instance bound to this component was destroyed and cannot be used properly.';
 class HotTableComponent {
     _hotSettingsResolver;
     _hotConfig;
     ngZone;
     environmentInjector;
-    // component inputs
+    destroyRef;
     /** The data for the Handsontable instance. */
     data = null;
     /** The settings for the Handsontable instance. */
     settings = {};
-    /** The container element for the Handsontable instance. */
     container;
     /** The Handsontable instance. */
     __hotInstance = null;
-    configSubscription;
-    constructor(_hotSettingsResolver, _hotConfig, ngZone, environmentInjector) {
+    constructor(_hotSettingsResolver, _hotConfig, ngZone, environmentInjector, destroyRef) {
         this._hotSettingsResolver = _hotSettingsResolver;
         this._hotConfig = _hotConfig;
         this.ngZone = ngZone;
         this.environmentInjector = environmentInjector;
+        this.destroyRef = destroyRef;
     }
     /**
      * Gets the Handsontable instance.
      * @returns The Handsontable instance or `null` if it's not yet been created or has been destroyed.
      */
     get hotInstance() {
-        if (!this.__hotInstance || (this.__hotInstance && !this.__hotInstance.isDestroyed)) {
-            // Will return the Handsontable instance or `null` if it's not yet been created.
-            return this.__hotInstance;
-        }
-        else {
+        if (this.__hotInstance?.isDestroyed) {
             console.warn(HOT_DESTROYED_WARNING);
             return null;
         }
+        return this.__hotInstance;
     }
     /**
      * Sets the Handsontable instance.
@@ -1203,7 +1191,7 @@ class HotTableComponent {
      * The initial settings of the table are also prepared here
      */
     ngAfterViewInit() {
-        let options = this._hotSettingsResolver.applyCustomSettings(this.settings, this.ngZone);
+        let options = this._hotSettingsResolver.applyCustomSettings(this.settings);
         const negotiatedSettings = this.getNegotiatedSettings(options);
         options = { ...options, ...negotiatedSettings, data: this.data };
         this.ngZone.runOutsideAngular(() => {
@@ -1211,7 +1199,7 @@ class HotTableComponent {
             this.hotInstance._angularEnvironmentInjector = this.environmentInjector;
             this.hotInstance.init();
         });
-        this.configSubscription = this._hotConfig.config$.subscribe((config) => {
+        this._hotConfig.config$.pipe(skip(1), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             if (this.hotInstance) {
                 const negotiatedSettings = this.getNegotiatedSettings(this.settings);
                 this.updateHotTable(negotiatedSettings);
@@ -1223,32 +1211,36 @@ class HotTableComponent {
             return;
         }
         if (changes.settings && !changes.settings.firstChange) {
-            const newOptions = this._hotSettingsResolver.applyCustomSettings(changes.settings.currentValue, this.ngZone);
-            this.updateHotTable(newOptions);
+            this.destroyEditorComponentRefs();
+            const newOptions = this._hotSettingsResolver.applyCustomSettings(changes.settings.currentValue);
+            const dataChanged = changes.data && !changes.data.firstChange;
+            this.updateHotTable(dataChanged ? { ...newOptions, data: changes.data.currentValue } : newOptions);
+            return;
         }
         if (changes.data && !changes.data.firstChange) {
-            this.hotInstance?.updateData(changes.data.currentValue);
+            this.ngZone.runOutsideAngular(() => {
+                this.hotInstance.updateData(changes.data.currentValue);
+            });
         }
     }
     /**
      * Destroys the Handsontable instance and clears the columns from custom editors.
      */
     ngOnDestroy() {
+        if (!this.hotInstance) {
+            return;
+        }
+        this.destroyEditorComponentRefs();
         this.ngZone.runOutsideAngular(() => {
-            if (!this.hotInstance) {
-                return;
-            }
-            const columns = this.hotInstance.getSettings().columns;
-            if (columns && Array.isArray(columns)) {
-                columns.forEach((column) => {
-                    if (column._editorComponentReference) {
-                        column._editorComponentReference.destroy();
-                    }
-                });
-            }
             this.hotInstance.destroy();
+            this.hotInstance = null;
         });
-        this.configSubscription.unsubscribe();
+    }
+    destroyEditorComponentRefs() {
+        const columns = this.hotInstance.getSettings().columns;
+        if (Array.isArray(columns)) {
+            columns.forEach((column) => column._editorComponentReference?.destroy());
+        }
     }
     /**
      * Updates the Handsontable instance with new settings.
@@ -1258,8 +1250,15 @@ class HotTableComponent {
         if (!this.hotInstance) {
             return;
         }
+        const initOnlySettingKeys = new Set(this.hotInstance.getSettings()?._initOnlySettings ?? []);
+        const filteredSettings = {};
+        for (const key of Object.keys(newSettings)) {
+            if (!initOnlySettingKeys.has(key)) {
+                filteredSettings[key] = newSettings[key];
+            }
+        }
         this.ngZone.runOutsideAngular(() => {
-            this.hotInstance?.updateSettings(newSettings, false);
+            this.hotInstance.updateSettings(filteredSettings, false);
         });
     }
     /**
@@ -1291,19 +1290,19 @@ class HotTableComponent {
         }
         return negotiatedSettings;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotTableComponent, deps: [{ token: HotSettingsResolver }, { token: HotGlobalConfigService }, { token: i0.NgZone }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HotTableComponent, selector: "hot-table", inputs: { data: "data", settings: "settings" }, providers: [HotSettingsResolver], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: '<div #container></div>', isInline: true, styles: [":host{display:block}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotTableComponent, deps: [{ token: HotSettingsResolver }, { token: HotGlobalConfigService }, { token: i0.NgZone }, { token: i0.EnvironmentInjector }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: HotTableComponent, isStandalone: true, selector: "hot-table", inputs: { data: "data", settings: "settings" }, providers: [HotSettingsResolver], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: '<div #container></div>', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hot-table', template: '<div #container></div>', encapsulation: ViewEncapsulation.None, providers: [HotSettingsResolver], styles: [":host{display:block}\n"] }]
-        }], ctorParameters: function () { return [{ type: HotSettingsResolver }, { type: HotGlobalConfigService }, { type: i0.NgZone }, { type: i0.EnvironmentInjector }]; }, propDecorators: { data: [{
+            args: [{ selector: 'hot-table', template: '<div #container></div>', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [HotSettingsResolver], styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: HotSettingsResolver }, { type: HotGlobalConfigService }, { type: i0.NgZone }, { type: i0.EnvironmentInjector }, { type: i0.DestroyRef }], propDecorators: { data: [{
                 type: Input
             }], settings: [{
                 type: Input
             }], container: [{
                 type: ViewChild,
-                args: ['container', { static: false }]
+                args: ['container']
             }] } });
 
 class HotTableModule {
@@ -1311,25 +1310,18 @@ class HotTableModule {
      * Placeholder for the library version.
      * Replaced automatically during the pre-build/post-build process.
      */
-    static version = '17.0.1';
-    constructor() { }
-    static forRoot() {
-        return {
-            ngModule: HotTableModule,
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: HotTableModule, declarations: [HotTableComponent, CustomEditorPlaceholderComponent], exports: [HotTableComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotTableModule });
+    static version = '17.1.0-rc10';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: HotTableModule, imports: [HotTableComponent], exports: [HotTableComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotTableModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: HotTableModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [HotTableComponent, CustomEditorPlaceholderComponent],
-                    imports: [],
+                    imports: [HotTableComponent],
                     exports: [HotTableComponent],
                 }]
-        }], ctorParameters: function () { return []; } });
+        }] });
 
 /*
  * Public API Surface of hot-table