Instance access

Use @ViewChild to get a reference to the Handsontable instance from your Angular component, then call API methods programmatically.

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 HotTableComponent. 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 HotTableComponent showing how to reference the Handsontable instance from the wrapper component.

Source code

TypeScript

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

@Component({
  selector: 'example1-instance-access',
  standalone: true,
  imports: [HotTableModule],
  template: ` <div class="example-controls-container">
      <div class="controls">
        <button (click)="selectCell()">Select cell B2</button>
      </div>
    </div>
    <div>
      <hot-table [data]="data" [settings]="gridSettings"></hot-table>
    </div>`,
})
export class AppComponent {
  @ViewChild(HotTableComponent, { static: true }) 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);
  }
}
/* end-file */



/* file: app.config.ts */
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
    },
  ],
};
/* end-file */

HTML

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

Result

Your Angular component now holds a reference to the Handsontable instance through @ViewChild. You can call any Handsontable API method on that instance from within the component’s lifecycle hooks or event handlers.