Angular Data GridDialog
Display modal dialogs, alerts, loading indicators, and notifications to enhance user interaction and provide feedback in your data grid application.
On this page
Overview
The Dialog plugin provides a modal dialog system for Handsontable that allows you to display custom content in modal dialogs that overlay the table. This is useful for showing notifications, error messages, loading indicators, or any other interactive content that requires user attention.
The dialog system is designed to be flexible and customizable, supporting various content types including plain text, HTML, and DOM elements. It also provides options for styling, animations, and user interaction controls.
Basic configuration
To enable the Dialog plugin, set the dialog option to true or provide a configuration object.
/* file: app.component.ts */
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper';
@Component({
selector: 'app-example1',
template: `
<hot-table
#hotTable
[settings]="hotSettings!"
[data]="hotData"
>
</hot-table>
`,
standalone: false
})
export class AppComponent implements AfterViewInit {
@ViewChild('hotTable') hotTable!: HotTableComponent;
readonly hotData = [
{ model: 'Trail Helmet', price: 1298.14, sellDate: 'Aug 31, 2025', sellTime: '02:12 PM', inStock: true },
{ model: 'Windbreaker Jacket', price: 178.9, sellDate: 'May 10, 2025', sellTime: '10:26 PM', inStock: false },
{ model: 'Cycling Cap', price: 288.1, sellDate: 'Sep 15, 2025', sellTime: '09:37 AM', inStock: true },
{ model: 'HL Mountain Frame', price: 94.49, sellDate: 'Jan 17, 2025', sellTime: '02:19 PM', inStock: false },
{ model: 'Racing Socks', price: 430.38, sellDate: 'May 10, 2025', sellTime: '01:42 PM', inStock: true },
{ model: 'Racing Socks', price: 138.85, sellDate: 'Sep 20, 2025', sellTime: '02:48 PM', inStock: true },
{ model: 'HL Mountain Frame', price: 1909.63, sellDate: 'Sep 5, 2025', sellTime: '09:35 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 1080.7, sellDate: 'Oct 24, 2025', sellTime: '10:58 PM', inStock: false },
{ model: 'Aero Bottle', price: 1571.13, sellDate: 'May 24, 2025', sellTime: '12:24 AM', inStock: true },
{ model: 'Windbreaker Jacket', price: 919.09, sellDate: 'Jul 16, 2025', sellTime: '07:11 PM', inStock: true },
{ model: 'HL Road Tire', price: 886.22, sellDate: 'Sep 9, 2025', sellTime: '12:42 AM', inStock: false },
{ model: 'Speed Gloves', price: 635.13, sellDate: 'Nov 17, 2025', sellTime: '12:45 PM', inStock: true },
{ model: 'Trail Helmet', price: 1440.64, sellDate: 'Jan 3, 2025', sellTime: '08:16 PM', inStock: false },
{ model: 'Aero Bottle', price: 944.63, sellDate: 'Nov 15, 2025', sellTime: '04:14 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 1161.43, sellDate: 'Jun 24, 2025', sellTime: '01:19 PM', inStock: false },
{ model: 'LED Bike Light', price: 1012.5, sellDate: 'May 1, 2025', sellTime: '05:30 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 635.37, sellDate: 'May 14, 2025', sellTime: '09:05 AM', inStock: true },
{ model: 'Road Tire Tube', price: 1421.27, sellDate: 'Jan 31, 2025', sellTime: '01:33 PM', inStock: true },
{ model: 'Action Camera', price: 1019.05, sellDate: 'Dec 7, 2025', sellTime: '01:26 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 603.96, sellDate: 'Sep 13, 2025', sellTime: '04:10 AM', inStock: false },
];
readonly hotSettings: GridSettings = {
columns: [
{
title: 'Model',
type: 'text',
data: 'model',
width: 150,
headerClassName: 'htLeft',
},
{
title: 'Price',
type: 'numeric',
data: 'price',
width: 80,
numericFormat: {
pattern: '$0,0.00',
culture: 'en-US',
},
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Date',
type: 'date',
data: 'sellDate',
width: 130,
dateFormat: 'MMM D, YYYY',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Time',
type: 'time',
data: 'sellTime',
width: 90,
timeFormat: 'hh:mm A',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'In stock',
type: 'checkbox',
data: 'inStock',
className: 'htCenter',
headerClassName: 'htCenter',
},
],
width: '100%',
height: 300,
stretchH: 'all',
contextMenu: true,
rowHeaders: true,
colHeaders: true,
autoWrapRow: true,
autoWrapCol: true,
autoRowSize: true,
dialog: true,
};
ngAfterViewInit() {
const hotInstance = this.hotTable.hotInstance;
if (hotInstance) {
// Show dialog after initialization
const dialogPlugin = hotInstance.getPlugin('dialog');
dialogPlugin.show({
content: 'This is a basic dialog with default configuration.',
closable: true,
});
}
}
}
/* 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 { AppComponent } 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: [ AppComponent ],
providers: [...appConfig.providers],
bootstrap: [ AppComponent ]
})
export class AppModule { }Content types
The dialog supports multiple content types including plain text, HTML strings, and DOM elements.
Plain text content
/* file: app.component.ts */
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper';
@Component({
selector: 'app-example2',
template: `
<hot-table
#hotTable
[settings]="hotSettings!"
[data]="hotData"
>
</hot-table>
`,
standalone: false
})
export class AppComponent implements AfterViewInit {
@ViewChild('hotTable') hotTable!: HotTableComponent;
readonly hotData = [
{ model: 'Trail Helmet', price: 1298.14, sellDate: 'Aug 31, 2025', sellTime: '02:12 PM', inStock: true },
{ model: 'Windbreaker Jacket', price: 178.9, sellDate: 'May 10, 2025', sellTime: '10:26 PM', inStock: false },
{ model: 'Cycling Cap', price: 288.1, sellDate: 'Sep 15, 2025', sellTime: '09:37 AM', inStock: true },
{ model: 'HL Mountain Frame', price: 94.49, sellDate: 'Jan 17, 2025', sellTime: '02:19 PM', inStock: false },
{ model: 'Racing Socks', price: 430.38, sellDate: 'May 10, 2025', sellTime: '01:42 PM', inStock: true },
{ model: 'Racing Socks', price: 138.85, sellDate: 'Sep 20, 2025', sellTime: '02:48 PM', inStock: true },
{ model: 'HL Mountain Frame', price: 1909.63, sellDate: 'Sep 5, 2025', sellTime: '09:35 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 1080.7, sellDate: 'Oct 24, 2025', sellTime: '10:58 PM', inStock: false },
{ model: 'Aero Bottle', price: 1571.13, sellDate: 'May 24, 2025', sellTime: '12:24 AM', inStock: true },
{ model: 'Windbreaker Jacket', price: 919.09, sellDate: 'Jul 16, 2025', sellTime: '07:11 PM', inStock: true },
{ model: 'HL Road Tire', price: 886.22, sellDate: 'Sep 9, 2025', sellTime: '12:42 AM', inStock: false },
{ model: 'Speed Gloves', price: 635.13, sellDate: 'Nov 17, 2025', sellTime: '12:45 PM', inStock: true },
{ model: 'Trail Helmet', price: 1440.64, sellDate: 'Jan 3, 2025', sellTime: '08:16 PM', inStock: false },
{ model: 'Aero Bottle', price: 944.63, sellDate: 'Nov 15, 2025', sellTime: '04:14 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 1161.43, sellDate: 'Jun 24, 2025', sellTime: '01:19 PM', inStock: false },
{ model: 'LED Bike Light', price: 1012.5, sellDate: 'May 1, 2025', sellTime: '05:30 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 635.37, sellDate: 'May 14, 2025', sellTime: '09:05 AM', inStock: true },
{ model: 'Road Tire Tube', price: 1421.27, sellDate: 'Jan 31, 2025', sellTime: '01:33 PM', inStock: true },
{ model: 'Action Camera', price: 1019.05, sellDate: 'Dec 7, 2025', sellTime: '01:26 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 603.96, sellDate: 'Sep 13, 2025', sellTime: '04:10 AM', inStock: false },
];
readonly hotSettings: GridSettings = {
columns: [
{
title: 'Model',
type: 'text',
data: 'model',
width: 150,
headerClassName: 'htLeft',
},
{
title: 'Price',
type: 'numeric',
data: 'price',
width: 80,
numericFormat: {
pattern: '$0,0.00',
culture: 'en-US',
},
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Date',
type: 'date',
data: 'sellDate',
width: 130,
dateFormat: 'MMM D, YYYY',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Time',
type: 'time',
data: 'sellTime',
width: 90,
timeFormat: 'hh:mm A',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'In stock',
type: 'checkbox',
data: 'inStock',
className: 'htCenter',
headerClassName: 'htCenter',
},
],
width: '100%',
height: 300,
stretchH: 'all',
contextMenu: true,
rowHeaders: true,
colHeaders: true,
autoWrapRow: true,
autoWrapCol: true,
autoRowSize: true,
dialog: {
content: 'This is a simple text message displayed in the dialog.',
closable: true,
},
};
ngAfterViewInit() {
const hotInstance = this.hotTable.hotInstance;
if (hotInstance) {
// Show dialog after initialization
const dialogPlugin = hotInstance.getPlugin('dialog');
dialogPlugin.show();
}
}
}
/* 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 { AppComponent } 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: [ AppComponent ],
providers: [...appConfig.providers],
bootstrap: [ AppComponent ]
})
export class AppModule { }HTML content
/* file: app.component.ts */
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper';
@Component({
selector: 'app-example3',
template: `
<hot-table
#hotTable
[settings]="hotSettings!"
[data]="hotData"
>
</hot-table>
`,
standalone: false
})
export class AppComponent implements AfterViewInit {
@ViewChild('hotTable') hotTable!: HotTableComponent;
readonly hotData = [
{ model: 'Trail Helmet', price: 1298.14, sellDate: 'Aug 31, 2025', sellTime: '02:12 PM', inStock: true },
{ model: 'Windbreaker Jacket', price: 178.9, sellDate: 'May 10, 2025', sellTime: '10:26 PM', inStock: false },
{ model: 'Cycling Cap', price: 288.1, sellDate: 'Sep 15, 2025', sellTime: '09:37 AM', inStock: true },
{ model: 'HL Mountain Frame', price: 94.49, sellDate: 'Jan 17, 2025', sellTime: '02:19 PM', inStock: false },
{ model: 'Racing Socks', price: 430.38, sellDate: 'May 10, 2025', sellTime: '01:42 PM', inStock: true },
{ model: 'Racing Socks', price: 138.85, sellDate: 'Sep 20, 2025', sellTime: '02:48 PM', inStock: true },
{ model: 'HL Mountain Frame', price: 1909.63, sellDate: 'Sep 5, 2025', sellTime: '09:35 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 1080.7, sellDate: 'Oct 24, 2025', sellTime: '10:58 PM', inStock: false },
{ model: 'Aero Bottle', price: 1571.13, sellDate: 'May 24, 2025', sellTime: '12:24 AM', inStock: true },
{ model: 'Windbreaker Jacket', price: 919.09, sellDate: 'Jul 16, 2025', sellTime: '07:11 PM', inStock: true },
{ model: 'HL Road Tire', price: 886.22, sellDate: 'Sep 9, 2025', sellTime: '12:42 AM', inStock: false },
{ model: 'Speed Gloves', price: 635.13, sellDate: 'Nov 17, 2025', sellTime: '12:45 PM', inStock: true },
{ model: 'Trail Helmet', price: 1440.64, sellDate: 'Jan 3, 2025', sellTime: '08:16 PM', inStock: false },
{ model: 'Aero Bottle', price: 944.63, sellDate: 'Nov 15, 2025', sellTime: '04:14 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 1161.43, sellDate: 'Jun 24, 2025', sellTime: '01:19 PM', inStock: false },
{ model: 'LED Bike Light', price: 1012.5, sellDate: 'May 1, 2025', sellTime: '05:30 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 635.37, sellDate: 'May 14, 2025', sellTime: '09:05 AM', inStock: true },
{ model: 'Road Tire Tube', price: 1421.27, sellDate: 'Jan 31, 2025', sellTime: '01:33 PM', inStock: true },
{ model: 'Action Camera', price: 1019.05, sellDate: 'Dec 7, 2025', sellTime: '01:26 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 603.96, sellDate: 'Sep 13, 2025', sellTime: '04:10 AM', inStock: false },
];
readonly hotSettings: GridSettings = {
columns: [
{
title: 'Model',
type: 'text',
data: 'model',
width: 150,
headerClassName: 'htLeft',
},
{
title: 'Price',
type: 'numeric',
data: 'price',
width: 80,
numericFormat: {
pattern: '$0,0.00',
culture: 'en-US',
},
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Date',
type: 'date',
data: 'sellDate',
width: 130,
dateFormat: 'MMM D, YYYY',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Time',
type: 'time',
data: 'sellTime',
width: 90,
timeFormat: 'hh:mm A',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'In stock',
type: 'checkbox',
data: 'inStock',
className: 'htCenter',
headerClassName: 'htCenter',
},
],
width: '100%',
height: 300,
stretchH: 'all',
contextMenu: true,
rowHeaders: true,
colHeaders: true,
autoWrapRow: true,
autoWrapCol: true,
autoRowSize: true,
dialog: {
content: '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button id="example3-button">Hide dialog</button>',
closable: true,
},
};
ngAfterViewInit() {
const hotInstance = this.hotTable.hotInstance;
if (hotInstance) {
// Show dialog after initialization
const dialogPlugin = hotInstance.getPlugin('dialog');
dialogPlugin.show();
document.getElementById('example3-button')?.addEventListener('click', () => {
dialogPlugin.hide();
});
}
}
}
/* 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 { AppComponent } 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: [ AppComponent ],
providers: [...appConfig.providers],
bootstrap: [ AppComponent ]
})
export class AppModule { }Template types
As the content option allows you to use plain text, HTML strings, and DOM elements, the template option allows you to use predefined dialog templates instead of custom content which can be useful for displaying alerts, confirmations, and other common ready-to-use dialogs.
The plugin offers two new methods to display predefined dialog templates: showAlert and showConfirm. For users looking for more customizability, the show method allows using templates with other options that the dialog offers, such as background variants, content background, and more.
/* file: app.component.ts */
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper';
@Component({
selector: 'app-example4',
template: `
<div style="margin-bottom: 16px; display: flex; gap: 10px;">
<button (click)="showAlert()">Show Alert</button>
<button (click)="showConfirm()">Show Confirm</button>
<button (click)="showCustomConfirm()">Show custom Confirm (with solid background)</button>
</div>
<hot-table
#hotTable
[settings]="hotSettings!"
[data]="hotData"
>
</hot-table>
`,
standalone: false
})
export class AppComponent implements AfterViewInit {
@ViewChild('hotTable') hotTable!: HotTableComponent;
readonly hotData = [
{ model: 'Trail Helmet', price: 1298.14, sellDate: 'Aug 31, 2025', sellTime: '02:12 PM', inStock: true },
{ model: 'Windbreaker Jacket', price: 178.9, sellDate: 'May 10, 2025', sellTime: '10:26 PM', inStock: false },
{ model: 'Cycling Cap', price: 288.1, sellDate: 'Sep 15, 2025', sellTime: '09:37 AM', inStock: true },
{ model: 'HL Mountain Frame', price: 94.49, sellDate: 'Jan 17, 2025', sellTime: '02:19 PM', inStock: false },
{ model: 'Racing Socks', price: 430.38, sellDate: 'May 10, 2025', sellTime: '01:42 PM', inStock: true },
{ model: 'Racing Socks', price: 138.85, sellDate: 'Sep 20, 2025', sellTime: '02:48 PM', inStock: true },
{ model: 'HL Mountain Frame', price: 1909.63, sellDate: 'Sep 5, 2025', sellTime: '09:35 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 1080.7, sellDate: 'Oct 24, 2025', sellTime: '10:58 PM', inStock: false },
{ model: 'Aero Bottle', price: 1571.13, sellDate: 'May 24, 2025', sellTime: '12:24 AM', inStock: true },
{ model: 'Windbreaker Jacket', price: 919.09, sellDate: 'Jul 16, 2025', sellTime: '07:11 PM', inStock: true },
{ model: 'HL Road Tire', price: 886.22, sellDate: 'Sep 9, 2025', sellTime: '12:42 AM', inStock: false },
{ model: 'Speed Gloves', price: 635.13, sellDate: 'Nov 17, 2025', sellTime: '12:45 PM', inStock: true },
{ model: 'Trail Helmet', price: 1440.64, sellDate: 'Jan 3, 2025', sellTime: '08:16 PM', inStock: false },
{ model: 'Aero Bottle', price: 944.63, sellDate: 'Nov 15, 2025', sellTime: '04:14 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 1161.43, sellDate: 'Jun 24, 2025', sellTime: '01:19 PM', inStock: false },
{ model: 'LED Bike Light', price: 1012.5, sellDate: 'May 1, 2025', sellTime: '05:30 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 635.37, sellDate: 'May 14, 2025', sellTime: '09:05 AM', inStock: true },
{ model: 'Road Tire Tube', price: 1421.27, sellDate: 'Jan 31, 2025', sellTime: '01:33 PM', inStock: true },
{ model: 'Action Camera', price: 1019.05, sellDate: 'Dec 7, 2025', sellTime: '01:26 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 603.96, sellDate: 'Sep 13, 2025', sellTime: '04:10 AM', inStock: false },
];
readonly hotSettings: GridSettings = {
columns: [
{
title: 'Model',
type: 'text',
data: 'model',
width: 150,
headerClassName: 'htLeft',
},
{
title: 'Price',
type: 'numeric',
data: 'price',
width: 80,
numericFormat: {
pattern: '$0,0.00',
culture: 'en-US',
},
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Date',
type: 'date',
data: 'sellDate',
width: 130,
dateFormat: 'MMM D, YYYY',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Time',
type: 'time',
data: 'sellTime',
width: 90,
timeFormat: 'hh:mm A',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'In stock',
type: 'checkbox',
data: 'inStock',
className: 'htCenter',
headerClassName: 'htCenter',
},
],
width: '100%',
height: 300,
stretchH: 'all',
contextMenu: true,
rowHeaders: true,
colHeaders: true,
autoWrapRow: true,
autoWrapCol: true,
autoRowSize: true,
dialog: true,
};
showAlert() {
const dialogPlugin = this.hotTable.hotInstance.getPlugin('dialog');
dialogPlugin.showAlert({
title: 'Alert',
description: 'This is an example of the alert dialog.',
}, () => {
dialogPlugin.hide();
});
}
showConfirm() {
const dialogPlugin = this.hotTable.hotInstance.getPlugin('dialog');
dialogPlugin.showConfirm('Do you want to undo the last action?', () => {
this.hotTable.hotInstance.getPlugin('undoRedo').undo();
dialogPlugin.hide();
}, () => {
dialogPlugin.hide();
});
}
showCustomConfirm() {
const hotInstance = this.hotTable.hotInstance;
const dialogPlugin = hotInstance.getPlugin('dialog');
dialogPlugin.show({
template: {
type: 'confirm',
title: 'Increase the price of the first row by:',
buttons: [
{
text: 'Cancel',
type: 'secondary',
callback: () => {
dialogPlugin.hide();
},
},
{
text: '$100',
type: 'secondary',
callback: () => {
dialogPlugin.hide();
hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 100);
hotInstance.selectCell(0, 1);
},
},
{
text: '$200',
type: 'secondary',
callback: () => {
dialogPlugin.hide();
hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 200);
hotInstance.selectCell(0, 1);
},
},
{
text: '$500',
type: 'secondary',
callback: () => {
dialogPlugin.hide();
hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 500);
hotInstance.selectCell(0, 1);
},
},
],
},
background: 'solid',
contentBackground: false,
closable: true,
});
}
}
/* 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 { AppComponent } 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: [ AppComponent ],
providers: [...appConfig.providers],
bootstrap: [ AppComponent ]
})
export class AppModule { }Background variants
The dialog supports two background variants: solid and semi-transparent.
/* file: app.component.ts */
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper';
@Component({
selector: 'app-example5',
template: `
<div class="example-controls-container" style="padding-bottom: 16px">
<div class="controlsQuickFilter">
<label for="background-select" class="selectColumn">Select a background:
<select id="background-select" (change)="onBackgroundChange($event)">
<option value="solid">Solid</option>
<option value="semi-transparent">Semi-transparent</option>
</select>
</label>
</div>
</div>
<hot-table
#hotTable
[settings]="hotSettings!"
[data]="hotData"
>
</hot-table>
`,
standalone: false
})
export class AppComponent implements AfterViewInit {
@ViewChild('hotTable') hotTable!: HotTableComponent;
readonly hotData = [
{ model: 'Trail Helmet', price: 1298.14, sellDate: 'Aug 31, 2025', sellTime: '02:12 PM', inStock: true },
{ model: 'Windbreaker Jacket', price: 178.9, sellDate: 'May 10, 2025', sellTime: '10:26 PM', inStock: false },
{ model: 'Cycling Cap', price: 288.1, sellDate: 'Sep 15, 2025', sellTime: '09:37 AM', inStock: true },
{ model: 'HL Mountain Frame', price: 94.49, sellDate: 'Jan 17, 2025', sellTime: '02:19 PM', inStock: false },
{ model: 'Racing Socks', price: 430.38, sellDate: 'May 10, 2025', sellTime: '01:42 PM', inStock: true },
{ model: 'Racing Socks', price: 138.85, sellDate: 'Sep 20, 2025', sellTime: '02:48 PM', inStock: true },
{ model: 'HL Mountain Frame', price: 1909.63, sellDate: 'Sep 5, 2025', sellTime: '09:35 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 1080.7, sellDate: 'Oct 24, 2025', sellTime: '10:58 PM', inStock: false },
{ model: 'Aero Bottle', price: 1571.13, sellDate: 'May 24, 2025', sellTime: '12:24 AM', inStock: true },
{ model: 'Windbreaker Jacket', price: 919.09, sellDate: 'Jul 16, 2025', sellTime: '07:11 PM', inStock: true },
{ model: 'HL Road Tire', price: 886.22, sellDate: 'Sep 9, 2025', sellTime: '12:42 AM', inStock: false },
{ model: 'Speed Gloves', price: 635.13, sellDate: 'Nov 17, 2025', sellTime: '12:45 PM', inStock: true },
{ model: 'Trail Helmet', price: 1440.64, sellDate: 'Jan 3, 2025', sellTime: '08:16 PM', inStock: false },
{ model: 'Aero Bottle', price: 944.63, sellDate: 'Nov 15, 2025', sellTime: '04:14 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 1161.43, sellDate: 'Jun 24, 2025', sellTime: '01:19 PM', inStock: false },
{ model: 'LED Bike Light', price: 1012.5, sellDate: 'May 1, 2025', sellTime: '05:30 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 635.37, sellDate: 'May 14, 2025', sellTime: '09:05 AM', inStock: true },
{ model: 'Road Tire Tube', price: 1421.27, sellDate: 'Jan 31, 2025', sellTime: '01:33 PM', inStock: true },
{ model: 'Action Camera', price: 1019.05, sellDate: 'Dec 7, 2025', sellTime: '01:26 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 603.96, sellDate: 'Sep 13, 2025', sellTime: '04:10 AM', inStock: false },
];
readonly hotSettings: GridSettings = {
columns: [
{
title: 'Model',
type: 'text',
data: 'model',
width: 150,
headerClassName: 'htLeft',
},
{
title: 'Price',
type: 'numeric',
data: 'price',
width: 80,
numericFormat: {
pattern: '$0,0.00',
culture: 'en-US',
},
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Date',
type: 'date',
data: 'sellDate',
width: 130,
dateFormat: 'MMM D, YYYY',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Time',
type: 'time',
data: 'sellTime',
width: 90,
timeFormat: 'hh:mm A',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'In stock',
type: 'checkbox',
data: 'inStock',
className: 'htCenter',
headerClassName: 'htCenter',
},
],
width: '100%',
height: 300,
stretchH: 'all',
contextMenu: true,
rowHeaders: true,
colHeaders: true,
autoWrapRow: true,
autoWrapCol: true,
autoRowSize: true,
dialog: {
content: 'This dialog uses a solid background (default).',
background: 'solid',
closable: true,
},
};
ngAfterViewInit() {
const hotInstance = this.hotTable.hotInstance;
if (hotInstance) {
// Show dialog after initialization
const dialogPlugin = hotInstance.getPlugin('dialog');
dialogPlugin.show();
}
}
onBackgroundChange(event: Event) {
const hotInstance = this.hotTable.hotInstance;
if (hotInstance) {
const background = (event.target as HTMLSelectElement).value;
const content = background === 'solid' ? 'This dialog uses a solid background (default).' : 'This dialog uses a semi-transparent background.';
const dialogPlugin = hotInstance.getPlugin('dialog');
dialogPlugin.update({
content,
background,
});
}
}
}
/* 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 { AppComponent } 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: [ AppComponent ],
providers: [...appConfig.providers],
bootstrap: [ AppComponent ]
})
export class AppModule { }Content background
The dialog content can have a background color using the contentBackground option.
/* file: app.component.ts */
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper';
@Component({
selector: 'app-example6',
template: `
<hot-table
#hotTable
[settings]="hotSettings!"
[data]="hotData"
>
</hot-table>
`,
standalone: false
})
export class AppComponent implements AfterViewInit {
@ViewChild('hotTable') hotTable!: HotTableComponent;
readonly hotData = [
{ model: 'Trail Helmet', price: 1298.14, sellDate: 'Aug 31, 2025', sellTime: '02:12 PM', inStock: true },
{ model: 'Windbreaker Jacket', price: 178.9, sellDate: 'May 10, 2025', sellTime: '10:26 PM', inStock: false },
{ model: 'Cycling Cap', price: 288.1, sellDate: 'Sep 15, 2025', sellTime: '09:37 AM', inStock: true },
{ model: 'HL Mountain Frame', price: 94.49, sellDate: 'Jan 17, 2025', sellTime: '02:19 PM', inStock: false },
{ model: 'Racing Socks', price: 430.38, sellDate: 'May 10, 2025', sellTime: '01:42 PM', inStock: true },
{ model: 'Racing Socks', price: 138.85, sellDate: 'Sep 20, 2025', sellTime: '02:48 PM', inStock: true },
{ model: 'HL Mountain Frame', price: 1909.63, sellDate: 'Sep 5, 2025', sellTime: '09:35 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 1080.7, sellDate: 'Oct 24, 2025', sellTime: '10:58 PM', inStock: false },
{ model: 'Aero Bottle', price: 1571.13, sellDate: 'May 24, 2025', sellTime: '12:24 AM', inStock: true },
{ model: 'Windbreaker Jacket', price: 919.09, sellDate: 'Jul 16, 2025', sellTime: '07:11 PM', inStock: true },
{ model: 'HL Road Tire', price: 886.22, sellDate: 'Sep 9, 2025', sellTime: '12:42 AM', inStock: false },
{ model: 'Speed Gloves', price: 635.13, sellDate: 'Nov 17, 2025', sellTime: '12:45 PM', inStock: true },
{ model: 'Trail Helmet', price: 1440.64, sellDate: 'Jan 3, 2025', sellTime: '08:16 PM', inStock: false },
{ model: 'Aero Bottle', price: 944.63, sellDate: 'Nov 15, 2025', sellTime: '04:14 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 1161.43, sellDate: 'Jun 24, 2025', sellTime: '01:19 PM', inStock: false },
{ model: 'LED Bike Light', price: 1012.5, sellDate: 'May 1, 2025', sellTime: '05:30 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 635.37, sellDate: 'May 14, 2025', sellTime: '09:05 AM', inStock: true },
{ model: 'Road Tire Tube', price: 1421.27, sellDate: 'Jan 31, 2025', sellTime: '01:33 PM', inStock: true },
{ model: 'Action Camera', price: 1019.05, sellDate: 'Dec 7, 2025', sellTime: '01:26 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 603.96, sellDate: 'Sep 13, 2025', sellTime: '04:10 AM', inStock: false },
];
readonly hotSettings: GridSettings = {
columns: [
{
title: 'Model',
type: 'text',
data: 'model',
width: 150,
headerClassName: 'htLeft',
},
{
title: 'Price',
type: 'numeric',
data: 'price',
width: 80,
numericFormat: {
pattern: '$0,0.00',
culture: 'en-US',
},
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Date',
type: 'date',
data: 'sellDate',
width: 130,
dateFormat: 'MMM D, YYYY',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Time',
type: 'time',
data: 'sellTime',
width: 90,
timeFormat: 'hh:mm A',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'In stock',
type: 'checkbox',
data: 'inStock',
className: 'htCenter',
headerClassName: 'htCenter',
},
],
width: '100%',
height: 300,
stretchH: 'all',
contextMenu: true,
rowHeaders: true,
colHeaders: true,
autoWrapRow: true,
autoWrapCol: true,
autoRowSize: true,
dialog: {
content: 'This dialog uses a semi-transparent and content background.',
contentBackground: true,
background: 'semi-transparent',
closable: true,
},
};
ngAfterViewInit() {
const hotInstance = this.hotTable.hotInstance;
if (hotInstance) {
// Show dialog after initialization
const dialogPlugin = hotInstance.getPlugin('dialog');
dialogPlugin.show();
}
}
}
/* 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 { AppComponent } 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: [ AppComponent ],
providers: [...appConfig.providers],
bootstrap: [ AppComponent ]
})
export class AppModule { }Dialog accessibility
The dialog plugin provides accessibility features through ARIA attributes. You can configure the dialog's accessibility properties using the a11y option, which includes:
role- Sets the ARIA role (defaults to "dialog")ariaLabel- Sets the dialog's accessible name (defaults to "Dialog"). This is used when there is no visible dialog title that can be referenced byariaLabelledby. If bothariaLabelandariaLabelledbyare provided,ariaLabelledbytakes precedenceariaLabelledby- References an element that labels the dialogariaDescribedby- References an element that describes the dialog
/* file: app.component.ts */
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper';
@Component({
selector: 'app-example7',
template: `
<hot-table
#hotTable
[settings]="hotSettings!"
[data]="hotData"
>
</hot-table>
`,
standalone: false
})
export class AppComponent implements AfterViewInit {
@ViewChild('hotTable') hotTable!: HotTableComponent;
readonly hotData = [
{ model: 'Trail Helmet', price: 1298.14, sellDate: 'Aug 31, 2025', sellTime: '02:12 PM', inStock: true },
{ model: 'Windbreaker Jacket', price: 178.9, sellDate: 'May 10, 2025', sellTime: '10:26 PM', inStock: false },
{ model: 'Cycling Cap', price: 288.1, sellDate: 'Sep 15, 2025', sellTime: '09:37 AM', inStock: true },
{ model: 'HL Mountain Frame', price: 94.49, sellDate: 'Jan 17, 2025', sellTime: '02:19 PM', inStock: false },
{ model: 'Racing Socks', price: 430.38, sellDate: 'May 10, 2025', sellTime: '01:42 PM', inStock: true },
{ model: 'Racing Socks', price: 138.85, sellDate: 'Sep 20, 2025', sellTime: '02:48 PM', inStock: true },
{ model: 'HL Mountain Frame', price: 1909.63, sellDate: 'Sep 5, 2025', sellTime: '09:35 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 1080.7, sellDate: 'Oct 24, 2025', sellTime: '10:58 PM', inStock: false },
{ model: 'Aero Bottle', price: 1571.13, sellDate: 'May 24, 2025', sellTime: '12:24 AM', inStock: true },
{ model: 'Windbreaker Jacket', price: 919.09, sellDate: 'Jul 16, 2025', sellTime: '07:11 PM', inStock: true },
{ model: 'HL Road Tire', price: 886.22, sellDate: 'Sep 9, 2025', sellTime: '12:42 AM', inStock: false },
{ model: 'Speed Gloves', price: 635.13, sellDate: 'Nov 17, 2025', sellTime: '12:45 PM', inStock: true },
{ model: 'Trail Helmet', price: 1440.64, sellDate: 'Jan 3, 2025', sellTime: '08:16 PM', inStock: false },
{ model: 'Aero Bottle', price: 944.63, sellDate: 'Nov 15, 2025', sellTime: '04:14 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 1161.43, sellDate: 'Jun 24, 2025', sellTime: '01:19 PM', inStock: false },
{ model: 'LED Bike Light', price: 1012.5, sellDate: 'May 1, 2025', sellTime: '05:30 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 635.37, sellDate: 'May 14, 2025', sellTime: '09:05 AM', inStock: true },
{ model: 'Road Tire Tube', price: 1421.27, sellDate: 'Jan 31, 2025', sellTime: '01:33 PM', inStock: true },
{ model: 'Action Camera', price: 1019.05, sellDate: 'Dec 7, 2025', sellTime: '01:26 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 603.96, sellDate: 'Sep 13, 2025', sellTime: '04:10 AM', inStock: false },
];
readonly hotSettings: GridSettings = {
columns: [
{
title: 'Model',
type: 'text',
data: 'model',
width: 150,
headerClassName: 'htLeft',
},
{
title: 'Price',
type: 'numeric',
data: 'price',
width: 80,
numericFormat: {
pattern: '$0,0.00',
culture: 'en-US',
},
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Date',
type: 'date',
data: 'sellDate',
width: 130,
dateFormat: 'MMM D, YYYY',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Time',
type: 'time',
data: 'sellTime',
width: 90,
timeFormat: 'hh:mm A',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'In stock',
type: 'checkbox',
data: 'inStock',
className: 'htCenter',
headerClassName: 'htCenter',
},
],
width: '100%',
height: 300,
stretchH: 'all',
contextMenu: true,
rowHeaders: true,
colHeaders: true,
autoWrapRow: true,
autoWrapCol: true,
autoRowSize: true,
dialog: {
content:
'<h2 id="example6-title">Title</h2><p id="example6-description">Description</p>',
a11y: {
role: 'alertdialog',
ariaLabel: 'Title',
ariaLabelledby: 'example6-title',
ariaDescribedby: 'example6-description',
},
closable: true,
},
};
ngAfterViewInit() {
const hotInstance = this.hotTable.hotInstance;
if (hotInstance) {
// Show dialog after initialization
const dialogPlugin = hotInstance.getPlugin('dialog');
dialogPlugin.show();
}
}
}
/* 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 { AppComponent } 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: [ AppComponent ],
providers: [...appConfig.providers],
bootstrap: [ AppComponent ]
})
export class AppModule { }Programmatic control
You can control the dialog programmatically using the plugin's methods.
Show and hide dialog
/* file: app.component.ts */
import { Component, ViewChild } from '@angular/core';
import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper';
@Component({
selector: 'app-example8',
template: `
<div style="margin-bottom: 16px; display: flex; gap: 10px;">
<button (click)="showDialog()">Show Dialog</button>
<button (click)="hideDialog()">Hide Dialog</button>
</div>
<hot-table
#hotTable
[settings]="hotSettings!"
[data]="hotData"
>
</hot-table>
`,
standalone: false
})
export class AppComponent {
@ViewChild('hotTable') hotTable!: HotTableComponent;
readonly hotData = [
{ model: 'Trail Helmet', price: 1298.14, sellDate: 'Aug 31, 2025', sellTime: '02:12 PM', inStock: true },
{ model: 'Windbreaker Jacket', price: 178.9, sellDate: 'May 10, 2025', sellTime: '10:26 PM', inStock: false },
{ model: 'Cycling Cap', price: 288.1, sellDate: 'Sep 15, 2025', sellTime: '09:37 AM', inStock: true },
{ model: 'HL Mountain Frame', price: 94.49, sellDate: 'Jan 17, 2025', sellTime: '02:19 PM', inStock: false },
{ model: 'Racing Socks', price: 430.38, sellDate: 'May 10, 2025', sellTime: '01:42 PM', inStock: true },
{ model: 'Racing Socks', price: 138.85, sellDate: 'Sep 20, 2025', sellTime: '02:48 PM', inStock: true },
{ model: 'HL Mountain Frame', price: 1909.63, sellDate: 'Sep 5, 2025', sellTime: '09:35 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 1080.7, sellDate: 'Oct 24, 2025', sellTime: '10:58 PM', inStock: false },
{ model: 'Aero Bottle', price: 1571.13, sellDate: 'May 24, 2025', sellTime: '12:24 AM', inStock: true },
{ model: 'Windbreaker Jacket', price: 919.09, sellDate: 'Jul 16, 2025', sellTime: '07:11 PM', inStock: true },
{ model: 'HL Road Tire', price: 886.22, sellDate: 'Sep 9, 2025', sellTime: '12:42 AM', inStock: false },
{ model: 'Speed Gloves', price: 635.13, sellDate: 'Nov 17, 2025', sellTime: '12:45 PM', inStock: true },
{ model: 'Trail Helmet', price: 1440.64, sellDate: 'Jan 3, 2025', sellTime: '08:16 PM', inStock: false },
{ model: 'Aero Bottle', price: 944.63, sellDate: 'Nov 15, 2025', sellTime: '04:14 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 1161.43, sellDate: 'Jun 24, 2025', sellTime: '01:19 PM', inStock: false },
{ model: 'LED Bike Light', price: 1012.5, sellDate: 'May 1, 2025', sellTime: '05:30 PM', inStock: false },
{ model: 'Windbreaker Jacket', price: 635.37, sellDate: 'May 14, 2025', sellTime: '09:05 AM', inStock: true },
{ model: 'Road Tire Tube', price: 1421.27, sellDate: 'Jan 31, 2025', sellTime: '01:33 PM', inStock: true },
{ model: 'Action Camera', price: 1019.05, sellDate: 'Dec 7, 2025', sellTime: '01:26 AM', inStock: false },
{ model: 'Carbon Handlebar', price: 603.96, sellDate: 'Sep 13, 2025', sellTime: '04:10 AM', inStock: false },
];
readonly hotSettings: GridSettings = {
columns: [
{
title: 'Model',
type: 'text',
data: 'model',
width: 150,
headerClassName: 'htLeft',
},
{
title: 'Price',
type: 'numeric',
data: 'price',
width: 80,
numericFormat: {
pattern: '$0,0.00',
culture: 'en-US',
},
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Date',
type: 'date',
data: 'sellDate',
width: 130,
dateFormat: 'MMM D, YYYY',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'Time',
type: 'time',
data: 'sellTime',
width: 90,
timeFormat: 'hh:mm A',
correctFormat: true,
className: 'htRight',
headerClassName: 'htRight',
},
{
title: 'In stock',
type: 'checkbox',
data: 'inStock',
className: 'htCenter',
headerClassName: 'htCenter',
},
],
width: '100%',
height: 300,
stretchH: 'all',
contextMenu: true,
rowHeaders: true,
colHeaders: true,
autoWrapRow: true,
autoWrapCol: true,
autoRowSize: true,
dialog: {
content: 'This dialog can be controlled programmatically.',
closable: true,
},
};
showDialog() {
const hotInstance = this.hotTable.hotInstance;
if (hotInstance) {
hotInstance.getPlugin('dialog').show();
}
}
hideDialog() {
const hotInstance = this.hotTable.hotInstance;
if (hotInstance) {
hotInstance.getPlugin('dialog').hide();
}
}
}
/* 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 { AppComponent } 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: [ AppComponent ],
providers: [...appConfig.providers],
bootstrap: [ AppComponent ]
})
export class AppModule { }Related API reference
There is a newer version of Handsontable available. Switch to the latest version ⟶