Angular Data GridInstance methods

Reference a Handsontable instance from within a Angular component, to programmatically perform actions.

Use Handsontable's API

Use Handsontable's API

You can programmatically change the internal state of Handsontable beyond what's possible with props. To do this, call the API methods of the relevant Handsontable instance associated with your instance of the HotTable component. Access to the Handsontable instance can be obtained as early as in the ngAfterViewInit() lifecycle hook by using the @ViewChild decorator, which holds a reference to the wrapper component.

The following example implements the HotTable component showing how to reference the Handsontable instance from the wrapper component.

{
  "name": "handsontable",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --disable-host-check",
    "build": "ng build"
  },
  "dependencies": {
    "@angular/core": "^19.2.6",
    "@angular/common": "^19.2.6",
    "@angular/forms": "^19.2.6",
    "@angular/platform-browser": "^19.2.6",
    "@angular/platform-browser-dynamic": "^19.2.6",
    "@angular/animations": "^19.2.6",
    "@angular/compiler": "^19.2.6",
    "@angular/router": "^19.2.6",
    "numbro": "^2.4.0",
    "rxjs": "^7.8.0",
    "tslib": "^2.6.2",
    "zone.js": "^0.15.0",
    "hyperformula": "^3.0.0",
    "handsontable": "latest",
    "@handsontable/angular-wrapper": "latest"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.2.6",
    "@angular/localize": "latest",
    "@angular/service-worker": "latest",
    "@angular/cli": "^19.2.6",
    "@angular/compiler-cli": "^19.2.6",
    "@types/node": "12.20.7",
    "ts-node": "8.3.0",
    "typescript": "5.5.4"
  }
}

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "sandbox": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "styles": [
              "node_modules/handsontable/styles/handsontable.min.css",
              "node_modules/handsontable/styles/ht-theme-main.min.css"
            ],
            "scripts": [],
            "preserveSymlinks": true,
            "allowedCommonJsDependencies": [
              "core-js",
              "@handsontable/pikaday",
              "numbro"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "sandbox:build"
          },
          "configurations": {
            "production": {
              "buildTarget": "sandbox:build:production"
            },
            "development": {
              "buildTarget": "sandbox:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "sandbox:build"
          }
        }
      }
    }
  },
  "defaultProject": "sandbox",
  "cli": {
    "analytics": false
  }
}

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "disableTypeScriptVersionCheck": true,
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Handsontable for Angular example</title>
    <base href="." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div>
  <example1-instance-access></example1-instance-access>
</div>

  </body>
</html>

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

import { Component, ViewChild } from '@angular/core';
import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper';

@Component({
  selector: 'example1-instance-access',
  standalone: false,
  template: ` <div class="controls">
      <button (click)="selectCell()">Select cell B2</button>
    </div>
    <div>
      <hot-table [data]="data" [settings]="gridSettings"></hot-table>
    </div>`,
})
export class Example1InstanceAccessComponent {
  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;

  readonly data: string[][] = [
    ['A1', 'B1', 'C1', 'D1'],
    ['A2', 'B2', 'C2', 'D2'],
    ['A3', 'B3', 'C3', 'D3'],
    ['A4', 'B4', 'C4', 'D4'],
  ];

  readonly gridSettings: GridSettings = {
    colHeaders: true,
    height: 'auto',
    autoWrapRow: true,
    autoWrapCol: true
  };

  selectCell(): void {
    // The Handsontable instance is stored under the `hotInstance` property of the wrapper component.
    this.hotTable?.hotInstance?.selectCell(1, 1);
  }
}

import { NgModule, ApplicationConfig } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
import { CommonModule } from '@angular/common';
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
import { Example1InstanceAccessComponent } from './app.component';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        themeName: 'ht-theme-main',
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};

@NgModule({
  imports: [ BrowserModule, HotTableModule, CommonModule ],
  declarations: [ Example1InstanceAccessComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ Example1InstanceAccessComponent ]
})

export class AppModule { }

import { enableProdMode } from '@angular/core';

enableProdMode();

/* file: app.component.ts */
import { Component, ViewChild } from '@angular/core';
import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper';

@Component({
  selector: 'example1-instance-access',
  standalone: false,
  template: ` <div class="controls">
      <button (click)="selectCell()">Select cell B2</button>
    </div>
    <div>
      <hot-table [data]="data" [settings]="gridSettings"></hot-table>
    </div>`,
})
export class Example1InstanceAccessComponent {
  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;

  readonly data: string[][] = [
    ['A1', 'B1', 'C1', 'D1'],
    ['A2', 'B2', 'C2', 'D2'],
    ['A3', 'B3', 'C3', 'D3'],
    ['A4', 'B4', 'C4', 'D4'],
  ];

  readonly gridSettings: GridSettings = {
    colHeaders: true,
    height: 'auto',
    autoWrapRow: true,
    autoWrapCol: true
  };

  selectCell(): void {
    // The Handsontable instance is stored under the `hotInstance` property of the wrapper component.
    this.hotTable?.hotInstance?.selectCell(1, 1);
  }
}




/* file: app.module.ts */
import { NgModule, ApplicationConfig } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
import { CommonModule } from '@angular/common';
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        themeName: 'ht-theme-main',
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};

@NgModule({
  imports: [ BrowserModule, HotTableModule, CommonModule ],
  declarations: [ Example1InstanceAccessComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ Example1InstanceAccessComponent ]
})

export class AppModule { }


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => { console.error(err) });

<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/styles/handsontable.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/styles/ht-theme-main.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/styles/ht-theme-horizon.css" /> 
<script src="https://cdn.jsdelivr.net/npm/rxjs@6/bundles/rxjs.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/core-js@2/client/core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/zone.js@0.15.0/bundles/zone.umd.min.js"></script>
<script src="https://dev-handsontable-develop.netlify.app/docs/scripts/prebuilt-umd/angular-core-primitives-signals.umd.min.js"></script>
<script src="https://dev-handsontable-develop.netlify.app/docs/scripts/prebuilt-umd/angular-compiler.umd.min.js"></script>
<script src="https://dev-handsontable-develop.netlify.app/docs/scripts/prebuilt-umd/angular-core.umd.min.js"></script>
<script src="https://dev-handsontable-develop.netlify.app/docs/scripts/prebuilt-umd/angular-common.umd.min.js"></script>
<script src="https://dev-handsontable-develop.netlify.app/docs/scripts/prebuilt-umd/angular-forms.umd.min.js"></script>
<script src="https://dev-handsontable-develop.netlify.app/docs/scripts/prebuilt-umd/angular-platformBrowser.umd.min.js"></script>
<script src="https://dev-handsontable-develop.netlify.app/docs/scripts/prebuilt-umd/angular-platformBrowserDynamic.umd.min.js"></script>
<script src="https://dev-handsontable-develop.netlify.app/docs/scripts/prebuilt-umd/handsontable-angular-wrapper.umd.min.js"></script>
<script src="https://dev-handsontable-develop.netlify.app/docs//scripts/fixer.js"></script>

<div>
  <example1-instance-access></example1-instance-access>
</div>

/* file: app.component.ts */
import { Component, ViewChild } from '@angular/core';
import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper';

@Component({
  selector: 'example1-instance-access',
  standalone: false,
  template: ` <div class="controls">
      <button (click)="selectCell()">Select cell B2</button>
    </div>
    <div>
      <hot-table [data]="data" [settings]="gridSettings"></hot-table>
    </div>`,
})
export class Example1InstanceAccessComponent {
  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;

  readonly data: string[][] = [
    ['A1', 'B1', 'C1', 'D1'],
    ['A2', 'B2', 'C2', 'D2'],
    ['A3', 'B3', 'C3', 'D3'],
    ['A4', 'B4', 'C4', 'D4'],
  ];

  readonly gridSettings: GridSettings = {
    colHeaders: true,
    height: 'auto',
    autoWrapRow: true,
    autoWrapCol: true
  };

  selectCell(): void {
    // The Handsontable instance is stored under the `hotInstance` property of the wrapper component.
    this.hotTable?.hotInstance?.selectCell(1, 1);
  }
}




/* file: app.module.ts */
import { NgModule, ApplicationConfig } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
import { CommonModule } from '@angular/common';
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
import { Example1InstanceAccessComponent } from './app.component';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: {
        themeName: 'ht-theme-main',
        license: NON_COMMERCIAL_LICENSE,
      } as HotGlobalConfig
    }
  ],
};

@NgModule({
  imports: [ BrowserModule, HotTableModule, CommonModule ],
  declarations: [ Example1InstanceAccessComponent ],
  providers: [...appConfig.providers],
  bootstrap: [ Example1InstanceAccessComponent ]
})

export class AppModule { }