Dialog

Display modal dialogs, alerts, loading indicators, and notifications to enhance user interaction and provide feedback in your data grid application.

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.

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

5
@Component({
6
  selector: 'app-example1',
7
  template: `
8
    <hot-table
9
      #hotTable
10
      [settings]="hotSettings!"
11
      [data]="hotData"
12
    >
13
    </hot-table>
14
  `,
15
  standalone: false
16
})
17
export class AppComponent implements AfterViewInit {
18
  @ViewChild('hotTable') hotTable!: HotTableComponent;
19

20
  readonly hotData = [
21
    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
22
    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
23
    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
24
    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
25
    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
26
    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
27
    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
28
    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
29
    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
30
    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
31
    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
32
    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
33
    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
34
    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
35
    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
36
    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
37
    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
38
    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
39
    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
40
    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
41
  ];
42

43
  readonly hotSettings: GridSettings = {
44
    columns: [
45
      {
46
        title: 'Model',
47
        type: 'text',
48
        data: 'model',
49
        width: 150,
50
        headerClassName: 'htLeft',
51
      },
52
      {
53
        title: 'Price',
54
        type: 'numeric',
55
        data: 'price',
56
        width: 80,
57
        locale: 'en-US',
58
        numericFormat: {
59
          style: 'currency',
60
          currency: 'USD',
61
          minimumFractionDigits: 2,
62
        },
63
        className: 'htRight',
64
        headerClassName: 'htRight',
65
      },
66
      {
67
        title: 'Date',
68
        type: 'intl-date',
69
        data: 'sellDate',
70
        width: 130,
71
        locale: 'en-US',
72
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
73
        className: 'htRight',
74
        headerClassName: 'htRight',
75

76
      },
77
      {
78
        title: 'Time',
79
        type: 'intl-time',
80
        data: 'sellTime',
81
        width: 90,
82
        locale: 'en-US',
83
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
84
        className: 'htRight',
85
        headerClassName: 'htRight',
86
      },
87
      {
88
        title: 'In stock',
89
        type: 'checkbox',
90
        data: 'inStock',
91
        className: 'htCenter',
92
        headerClassName: 'htCenter',
93
      },
94
    ],
95
    width: '100%',
96
    height: 300,
97
    stretchH: 'all',
98
    contextMenu: true,
99
    rowHeaders: true,
100
    colHeaders: true,
101
    autoWrapRow: true,
102
    autoWrapCol: true,
103
    autoRowSize: true,
104
    dialog: true,
105
  };
106

107
  ngAfterViewInit() {
108
    const hotInstance = this.hotTable.hotInstance;
109

110
    if (hotInstance) {
111
      // Show dialog after initialization
112
      const dialogPlugin = hotInstance.getPlugin('dialog');
113
      dialogPlugin.show({
114
        content: 'This is a basic dialog with default configuration.',
115
        closable: true,
116
      });
117
    }
118
  }
119
}
120
/* end-file */
121

122

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

131
/* start:skip-in-compilation */
132
import { AppComponent } from './app.component';
133
/* end:skip-in-compilation */
134

135
// register Handsontable's modules
136
registerAllModules();
137

138
export const appConfig: ApplicationConfig = {
139
  providers: [
140
    {
141
      provide: HOT_GLOBAL_CONFIG,
142
      useValue: {
143
        license: NON_COMMERCIAL_LICENSE,
144
      } as HotGlobalConfig
145
    }
146
  ],
147
};
148

149
@NgModule({
150
  imports: [ BrowserModule, HotTableModule, CommonModule ],
151
  declarations: [ AppComponent ],
152
  providers: [...appConfig.providers],
153
  bootstrap: [ AppComponent ]
154
})
155

156
export class AppModule { }
157
/* end-file */

1
<div>
2
  <app-example1></app-example1>
3
</div>

Content types

The dialog supports multiple content types including plain text, HTML strings, and DOM elements.

Plain text content

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

5
@Component({
6
  selector: 'app-example2',
7
  template: `
8
    <hot-table
9
      #hotTable
10
      [settings]="hotSettings!"
11
      [data]="hotData"
12
    >
13
    </hot-table>
14
  `,
15
  standalone: false
16
})
17
export class AppComponent implements AfterViewInit {
18
  @ViewChild('hotTable') hotTable!: HotTableComponent;
19

20
  readonly hotData = [
21
    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
22
    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
23
    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
24
    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
25
    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
26
    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
27
    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
28
    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
29
    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
30
    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
31
    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
32
    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
33
    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
34
    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
35
    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
36
    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
37
    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
38
    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
39
    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
40
    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
41
  ];
42

43
  readonly hotSettings: GridSettings = {
44
    columns: [
45
      {
46
        title: 'Model',
47
        type: 'text',
48
        data: 'model',
49
        width: 150,
50
        headerClassName: 'htLeft',
51
      },
52
      {
53
        title: 'Price',
54
        type: 'numeric',
55
        data: 'price',
56
        width: 80,
57
        locale: 'en-US',
58
        numericFormat: {
59
          style: 'currency',
60
          currency: 'USD',
61
          minimumFractionDigits: 2,
62
        },
63
        className: 'htRight',
64
        headerClassName: 'htRight',
65
      },
66
      {
67
        title: 'Date',
68
        type: 'intl-date',
69
        data: 'sellDate',
70
        width: 130,
71
        locale: 'en-US',
72
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
73
        className: 'htRight',
74
        headerClassName: 'htRight',
75

76
      },
77
      {
78
        title: 'Time',
79
        type: 'intl-time',
80
        data: 'sellTime',
81
        width: 90,
82
        locale: 'en-US',
83
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
84
        className: 'htRight',
85
        headerClassName: 'htRight',
86
      },
87
      {
88
        title: 'In stock',
89
        type: 'checkbox',
90
        data: 'inStock',
91
        className: 'htCenter',
92
        headerClassName: 'htCenter',
93
      },
94
    ],
95
    width: '100%',
96
    height: 300,
97
    stretchH: 'all',
98
    contextMenu: true,
99
    rowHeaders: true,
100
    colHeaders: true,
101
    autoWrapRow: true,
102
    autoWrapCol: true,
103
    autoRowSize: true,
104
    dialog: {
105
      content: 'This is a simple text message displayed in the dialog.',
106
      closable: true,
107
    },
108
  };
109

110
  ngAfterViewInit() {
111
    const hotInstance = this.hotTable.hotInstance;
112

113
    if (hotInstance) {
114
      // Show dialog after initialization
115
      const dialogPlugin = hotInstance.getPlugin('dialog');
116
      dialogPlugin.show();
117
    }
118
  }
119
}
120
/* end-file */
121

122

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

131
/* start:skip-in-compilation */
132
import { AppComponent } from './app.component';
133
/* end:skip-in-compilation */
134

135
// register Handsontable's modules
136
registerAllModules();
137

138
export const appConfig: ApplicationConfig = {
139
  providers: [
140
    {
141
      provide: HOT_GLOBAL_CONFIG,
142
      useValue: {
143
        license: NON_COMMERCIAL_LICENSE,
144
      } as HotGlobalConfig
145
    }
146
  ],
147
};
148

149
@NgModule({
150
  imports: [ BrowserModule, HotTableModule, CommonModule ],
151
  declarations: [ AppComponent ],
152
  providers: [...appConfig.providers],
153
  bootstrap: [ AppComponent ]
154
})
155

156
export class AppModule { }
157
/* end-file */

1
<div>
2
  <app-example2></app-example2>
3
</div>

HTML content

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

5
@Component({
6
  selector: 'app-example3',
7
  template: `
8
    <hot-table
9
      #hotTable
10
      [settings]="hotSettings!"
11
      [data]="hotData"
12
    >
13
    </hot-table>
14
  `,
15
  standalone: false
16
})
17
export class AppComponent implements AfterViewInit {
18
  @ViewChild('hotTable') hotTable!: HotTableComponent;
19

20
  readonly hotData = [
21
    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
22
    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
23
    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
24
    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
25
    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
26
    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
27
    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
28
    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
29
    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
30
    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
31
    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
32
    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
33
    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
34
    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
35
    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
36
    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
37
    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
38
    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
39
    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
40
    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
41
  ];
42

43
  readonly hotSettings: GridSettings = {
44
    columns: [
45
      {
46
        title: 'Model',
47
        type: 'text',
48
        data: 'model',
49
        width: 150,
50
        headerClassName: 'htLeft',
51
      },
52
      {
53
        title: 'Price',
54
        type: 'numeric',
55
        data: 'price',
56
        width: 80,
57
        locale: 'en-US',
58
        numericFormat: {
59
          style: 'currency',
60
          currency: 'USD',
61
          minimumFractionDigits: 2,
62
        },
63
        className: 'htRight',
64
        headerClassName: 'htRight',
65
      },
66
      {
67
        title: 'Date',
68
        type: 'intl-date',
69
        data: 'sellDate',
70
        width: 130,
71
        locale: 'en-US',
72
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
73
        className: 'htRight',
74
        headerClassName: 'htRight',
75

76
      },
77
      {
78
        title: 'Time',
79
        type: 'intl-time',
80
        data: 'sellTime',
81
        width: 90,
82
        locale: 'en-US',
83
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
84
        className: 'htRight',
85
        headerClassName: 'htRight',
86
      },
87
      {
88
        title: 'In stock',
89
        type: 'checkbox',
90
        data: 'inStock',
91
        className: 'htCenter',
92
        headerClassName: 'htCenter',
93
      },
94
    ],
95
    width: '100%',
96
    height: 300,
97
    stretchH: 'all',
98
    contextMenu: true,
99
    rowHeaders: true,
100
    colHeaders: true,
101
    autoWrapRow: true,
102
    autoWrapCol: true,
103
    autoRowSize: true,
104
    dialog: {
105
      content: '<p>This dialog contains <strong>HTML</strong> content with formatting.</p><button id="example3-button">Hide dialog</button>',
106
      closable: true,
107
    },
108
  };
109

110
  ngAfterViewInit() {
111
    const hotInstance = this.hotTable.hotInstance;
112

113
    if (hotInstance) {
114
      // Show dialog after initialization
115
      const dialogPlugin = hotInstance.getPlugin('dialog');
116
      dialogPlugin.show();
117

118
      document.getElementById('example3-button')?.addEventListener('click', () => {
119
        dialogPlugin.hide();
120
      });
121
    }
122
  }
123
}
124
/* end-file */
125

126

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

135
/* start:skip-in-compilation */
136
import { AppComponent } from './app.component';
137
/* end:skip-in-compilation */
138

139
// register Handsontable's modules
140
registerAllModules();
141

142
export const appConfig: ApplicationConfig = {
143
  providers: [
144
    {
145
      provide: HOT_GLOBAL_CONFIG,
146
      useValue: {
147
        license: NON_COMMERCIAL_LICENSE,
148
      } as HotGlobalConfig
149
    }
150
  ],
151
};
152

153
@NgModule({
154
  imports: [ BrowserModule, HotTableModule, CommonModule ],
155
  declarations: [ AppComponent ],
156
  providers: [...appConfig.providers],
157
  bootstrap: [ AppComponent ]
158
})
159

160
export class AppModule { }
161
/* end-file */

1
<div>
2
  <app-example3></app-example3>
3
</div>

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.

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

5
@Component({
6
  selector: 'app-example4',
7
  template: `
8
    <div style="margin-bottom: 16px; display: flex; gap: 10px;">
9
      <button (click)="showAlert()">Show Alert</button>
10
      <button (click)="showConfirm()">Show Confirm</button>
11
      <button (click)="showCustomConfirm()">Show custom Confirm (with solid background)</button>
12
    </div>
13
    <hot-table
14
      #hotTable
15
      [settings]="hotSettings!"
16
      [data]="hotData"
17
    >
18
    </hot-table>
19
  `,
20
  standalone: false
21
})
22
export class AppComponent implements AfterViewInit {
23
  @ViewChild('hotTable') hotTable!: HotTableComponent;
24

25
  readonly hotData = [
26
    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
27
    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
28
    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
29
    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
30
    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
31
    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
32
    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
33
    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
34
    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
35
    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
36
    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
37
    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
38
    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
39
    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
40
    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
41
    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
42
    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
43
    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
44
    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
45
    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
46
  ];
47

48
  readonly hotSettings: GridSettings = {
49
    columns: [
50
      {
51
        title: 'Model',
52
        type: 'text',
53
        data: 'model',
54
        width: 150,
55
        headerClassName: 'htLeft',
56
      },
57
      {
58
        title: 'Price',
59
        type: 'numeric',
60
        data: 'price',
61
        width: 80,
62
        locale: 'en-US',
63
        numericFormat: {
64
          style: 'currency',
65
          currency: 'USD',
66
          minimumFractionDigits: 2,
67
        },
68
        className: 'htRight',
69
        headerClassName: 'htRight',
70
      },
71
      {
72
        title: 'Date',
73
        type: 'intl-date',
74
        data: 'sellDate',
75
        width: 130,
76
        locale: 'en-US',
77
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
78
        className: 'htRight',
79
        headerClassName: 'htRight',
80

81
      },
82
      {
83
        title: 'Time',
84
        type: 'intl-time',
85
        data: 'sellTime',
86
        width: 90,
87
        locale: 'en-US',
88
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
89
        className: 'htRight',
90
        headerClassName: 'htRight',
91
      },
92
      {
93
        title: 'In stock',
94
        type: 'checkbox',
95
        data: 'inStock',
96
        className: 'htCenter',
97
        headerClassName: 'htCenter',
98
      },
99
    ],
100
    width: '100%',
101
    height: 300,
102
    stretchH: 'all',
103
    contextMenu: true,
104
    rowHeaders: true,
105
    colHeaders: true,
106
    autoWrapRow: true,
107
    autoWrapCol: true,
108
    autoRowSize: true,
109
    dialog: true,
110
  };
111

112
  showAlert() {
113
    const dialogPlugin = this.hotTable.hotInstance.getPlugin('dialog');
114

115
    dialogPlugin.showAlert({
116
      title: 'Alert',
117
      description: 'This is an example of the alert dialog.',
118
    }, () => {
119
      dialogPlugin.hide();
120
    });
121
  }
122

123
  showConfirm() {
124
    const dialogPlugin = this.hotTable.hotInstance.getPlugin('dialog');
125

126
    dialogPlugin.showConfirm('Do you want to undo the last action?', () => {
127
      this.hotTable.hotInstance.getPlugin('undoRedo').undo();
128
      dialogPlugin.hide();
129
    }, () => {
130
      dialogPlugin.hide();
131
    });
132
  }
133

134
  showCustomConfirm() {
135
    const hotInstance = this.hotTable.hotInstance;
136
    const dialogPlugin = hotInstance.getPlugin('dialog');
137

138
    dialogPlugin.show({
139
      template: {
140
        type: 'confirm',
141
        title: 'Increase the price of the first row by:',
142
        buttons: [
143
          {
144
            text: 'Cancel',
145
            type: 'secondary',
146
            callback: () => {
147
              dialogPlugin.hide();
148
            },
149
          },
150
          {
151
            text: '$100',
152
            type: 'secondary',
153
            callback: () => {
154
              dialogPlugin.hide();
155
              hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 100);
156
              hotInstance.selectCell(0, 1);
157
            },
158
          },
159
          {
160
            text: '$200',
161
            type: 'secondary',
162
            callback: () => {
163
              dialogPlugin.hide();
164
              hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 200);
165
              hotInstance.selectCell(0, 1);
166
            },
167
          },
168
          {
169
            text: '$500',
170
            type: 'secondary',
171
            callback: () => {
172
              dialogPlugin.hide();
173
              hotInstance.setDataAtCell(0, 1, hotInstance.getDataAtCell(0, 1) + 500);
174
              hotInstance.selectCell(0, 1);
175
            },
176
          },
177
        ],
178
      },
179
      background: 'solid',
180
      contentBackground: false,
181
      closable: true,
182
    });
183
  }
184
}
185
/* end-file */
186

187

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

196
/* start:skip-in-compilation */
197
import { AppComponent } from './app.component';
198
/* end:skip-in-compilation */
199

200
// register Handsontable's modules
201
registerAllModules();
202

203
export const appConfig: ApplicationConfig = {
204
  providers: [
205
    {
206
      provide: HOT_GLOBAL_CONFIG,
207
      useValue: {
208
        license: NON_COMMERCIAL_LICENSE,
209
      } as HotGlobalConfig
210
    }
211
  ],
212
};
213

214
@NgModule({
215
  imports: [ BrowserModule, HotTableModule, CommonModule ],
216
  declarations: [ AppComponent ],
217
  providers: [...appConfig.providers],
218
  bootstrap: [ AppComponent ]
219
})
220

221
export class AppModule { }
222
/* end-file */

1
<div>
2
  <app-example4></app-example4>
3
</div>

Background variants

The dialog supports two background variants: solid and semi-transparent.

1
/* file: app.component.ts */
2
import { AfterViewInit, Component, ViewChild, ElementRef, OnDestroy } from '@angular/core';
3
import { GridSettings, HotTableComponent } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'app-example5',
7
  template: `
8
    <div class="example-controls-container">
9
      <div class="controls">
10
        <div class="theme-dropdown" #dropdown>
11
          <button
12
            class="theme-dropdown-trigger"
13
            type="button"
14
            aria-haspopup="listbox"
15
            [attr.aria-expanded]="isOpen"
16
            (click)="toggleDropdown()"
17
          >
18
            <span>{{ selectedLabel }}</span>
19
            <svg class="theme-dropdown-chevron" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6l6 -6"/></svg>
20
          </button>
21
          <ul class="theme-dropdown-menu" role="listbox" *ngIf="isOpen">
22
            <li
23
              *ngFor="let opt of backgroundOptions"
24
              role="option"
25
              [attr.aria-selected]="selected === opt.value"
26
              (click)="selectBackground(opt.value)"
27
            >{{ opt.label }}</li>
28
          </ul>
29
        </div>
30
      </div>
31
    </div>
32
    <hot-table
33
      #hotTable
34
      [settings]="hotSettings!"
35
      [data]="hotData"
36
    >
37
    </hot-table>
38
  `,
39
  standalone: false
40
})
41
export class AppComponent implements AfterViewInit, OnDestroy {
42
  @ViewChild('hotTable') hotTable!: HotTableComponent;
43
  @ViewChild('dropdown') dropdownRef!: ElementRef;
44

45
  isOpen = false;
46
  selected = 'solid';
47
  backgroundOptions = [
48
    { value: 'solid', label: 'Solid' },
49
    { value: 'semi-transparent', label: 'Semi-transparent' },
50
  ];
51

52
  private clickListener = (e: MouseEvent) => {
53
    if (this.dropdownRef && !this.dropdownRef.nativeElement.contains(e.target)) {
54
      this.isOpen = false;
55
    }
56
  };
57

58
  private keydownListener = (e: KeyboardEvent) => {
59
    if (e.key === 'Escape') this.isOpen = false;
60
  };
61

62
  get selectedLabel(): string {
63
    return this.backgroundOptions.find((o) => o.value === this.selected)?.label || '';
64
  }
65

66
  toggleDropdown() {
67
    this.isOpen = !this.isOpen;
68
  }
69

70
  selectBackground(value: string) {
71
    this.selected = value;
72
    this.isOpen = false;
73

74
    const hotInstance = this.hotTable.hotInstance;
75

76
    if (hotInstance) {
77
      const content = value === 'solid'
78
        ? 'This dialog uses a solid background (default).'
79
        : 'This dialog uses a semi-transparent background.';
80

81
      hotInstance.getPlugin('dialog').update({ content, background: value });
82
    }
83
  }
84

85
  readonly hotData = [
86
    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
87
    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
88
    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
89
    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
90
    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
91
    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
92
    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
93
    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
94
    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
95
    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
96
    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
97
    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
98
    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
99
    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
100
    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
101
    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
102
    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
103
    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
104
    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
105
    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
106
  ];
107

108
  readonly hotSettings: GridSettings = {
109
    columns: [
110
      {
111
        title: 'Model',
112
        type: 'text',
113
        data: 'model',
114
        width: 150,
115
        headerClassName: 'htLeft',
116
      },
117
      {
118
        title: 'Price',
119
        type: 'numeric',
120
        data: 'price',
121
        width: 80,
122
        locale: 'en-US',
123
        numericFormat: {
124
          style: 'currency',
125
          currency: 'USD',
126
          minimumFractionDigits: 2,
127
        },
128
        className: 'htRight',
129
        headerClassName: 'htRight',
130
      },
131
      {
132
        title: 'Date',
133
        type: 'intl-date',
134
        data: 'sellDate',
135
        width: 130,
136
        locale: 'en-US',
137
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
138
        className: 'htRight',
139
        headerClassName: 'htRight',
140

141
      },
142
      {
143
        title: 'Time',
144
        type: 'intl-time',
145
        data: 'sellTime',
146
        width: 90,
147
        locale: 'en-US',
148
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
149
        className: 'htRight',
150
        headerClassName: 'htRight',
151
      },
152
      {
153
        title: 'In stock',
154
        type: 'checkbox',
155
        data: 'inStock',
156
        className: 'htCenter',
157
        headerClassName: 'htCenter',
158
      },
159
    ],
160
    width: '100%',
161
    height: 300,
162
    stretchH: 'all',
163
    contextMenu: true,
164
    rowHeaders: true,
165
    colHeaders: true,
166
    autoWrapRow: true,
167
    autoWrapCol: true,
168
    autoRowSize: true,
169
    dialog: {
170
      content: 'This dialog uses a solid background (default).',
171
      background: 'solid',
172
      closable: true,
173
    },
174
  };
175

176
  ngAfterViewInit() {
177
    const hotInstance = this.hotTable.hotInstance;
178

179
    if (hotInstance) {
180
      hotInstance.getPlugin('dialog').show();
181
    }
182

183
    document.addEventListener('click', this.clickListener);
184
    document.addEventListener('keydown', this.keydownListener);
185
  }
186

187
  ngOnDestroy() {
188
    document.removeEventListener('click', this.clickListener);
189
    document.removeEventListener('keydown', this.keydownListener);
190
  }
191
}
192
/* end-file */
193

194

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

203
/* start:skip-in-compilation */
204
import { AppComponent } from './app.component';
205
/* end:skip-in-compilation */
206

207
// register Handsontable's modules
208
registerAllModules();
209

210
export const appConfig: ApplicationConfig = {
211
  providers: [
212
    {
213
      provide: HOT_GLOBAL_CONFIG,
214
      useValue: {
215
        license: NON_COMMERCIAL_LICENSE,
216
      } as HotGlobalConfig
217
    }
218
  ],
219
};
220

221
@NgModule({
222
  imports: [ BrowserModule, HotTableModule, CommonModule ],
223
  declarations: [ AppComponent ],
224
  providers: [...appConfig.providers],
225
  bootstrap: [ AppComponent ]
226
})
227

228
export class AppModule { }
229
/* end-file */

1
<div>
2
  <app-example5></app-example5>
3
</div>

Content background

The dialog content can have a background color using the contentBackground option.

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

5
@Component({
6
  selector: 'app-example6',
7
  template: `
8
    <hot-table
9
      #hotTable
10
      [settings]="hotSettings!"
11
      [data]="hotData"
12
    >
13
    </hot-table>
14
  `,
15
  standalone: false
16
})
17
export class AppComponent implements AfterViewInit {
18
  @ViewChild('hotTable') hotTable!: HotTableComponent;
19

20
  readonly hotData = [
21
    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
22
    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
23
    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
24
    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
25
    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
26
    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
27
    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
28
    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
29
    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
30
    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
31
    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
32
    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
33
    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
34
    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
35
    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
36
    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
37
    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
38
    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
39
    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
40
    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
41
  ];
42

43
  readonly hotSettings: GridSettings = {
44
    columns: [
45
      {
46
        title: 'Model',
47
        type: 'text',
48
        data: 'model',
49
        width: 150,
50
        headerClassName: 'htLeft',
51
      },
52
      {
53
        title: 'Price',
54
        type: 'numeric',
55
        data: 'price',
56
        width: 80,
57
        locale: 'en-US',
58
        numericFormat: {
59
          style: 'currency',
60
          currency: 'USD',
61
          minimumFractionDigits: 2,
62
        },
63
        className: 'htRight',
64
        headerClassName: 'htRight',
65
      },
66
      {
67
        title: 'Date',
68
        type: 'intl-date',
69
        data: 'sellDate',
70
        width: 130,
71
        locale: 'en-US',
72
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
73
        className: 'htRight',
74
        headerClassName: 'htRight',
75

76
      },
77
      {
78
        title: 'Time',
79
        type: 'intl-time',
80
        data: 'sellTime',
81
        width: 90,
82
        locale: 'en-US',
83
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
84
        className: 'htRight',
85
        headerClassName: 'htRight',
86
      },
87
      {
88
        title: 'In stock',
89
        type: 'checkbox',
90
        data: 'inStock',
91
        className: 'htCenter',
92
        headerClassName: 'htCenter',
93
      },
94
    ],
95
    width: '100%',
96
    height: 300,
97
    stretchH: 'all',
98
    contextMenu: true,
99
    rowHeaders: true,
100
    colHeaders: true,
101
    autoWrapRow: true,
102
    autoWrapCol: true,
103
    autoRowSize: true,
104
    dialog: {
105
      content: 'This dialog uses a semi-transparent and content background.',
106
      contentBackground: true,
107
      background: 'semi-transparent',
108
      closable: true,
109
    },
110
  };
111

112
  ngAfterViewInit() {
113
    const hotInstance = this.hotTable.hotInstance;
114

115
    if (hotInstance) {
116
      // Show dialog after initialization
117
      const dialogPlugin = hotInstance.getPlugin('dialog');
118
      dialogPlugin.show();
119
    }
120
  }
121
}
122
/* end-file */
123

124

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

133
/* start:skip-in-compilation */
134
import { AppComponent } from './app.component';
135
/* end:skip-in-compilation */
136

137
// register Handsontable's modules
138
registerAllModules();
139

140
export const appConfig: ApplicationConfig = {
141
  providers: [
142
    {
143
      provide: HOT_GLOBAL_CONFIG,
144
      useValue: {
145
        license: NON_COMMERCIAL_LICENSE,
146
      } as HotGlobalConfig
147
    }
148
  ],
149
};
150

151
@NgModule({
152
  imports: [ BrowserModule, HotTableModule, CommonModule ],
153
  declarations: [ AppComponent ],
154
  providers: [...appConfig.providers],
155
  bootstrap: [ AppComponent ]
156
})
157

158
export class AppModule { }
159
/* end-file */

1
<div>
2
  <app-example6></app-example6>
3
</div>

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 by ariaLabelledby. If both ariaLabel and ariaLabelledby are provided, ariaLabelledby takes precedence
ariaLabelledby - References an element that labels the dialog
ariaDescribedby - References an element that describes the dialog

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

5
@Component({
6
  selector: 'app-example7',
7
  template: `
8
    <hot-table
9
      #hotTable
10
      [settings]="hotSettings!"
11
      [data]="hotData"
12
    >
13
    </hot-table>
14
  `,
15
  standalone: false
16
})
17
export class AppComponent implements AfterViewInit {
18
  @ViewChild('hotTable') hotTable!: HotTableComponent;
19

20
  readonly hotData = [
21
    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
22
    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
23
    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
24
    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
25
    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
26
    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
27
    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
28
    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
29
    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
30
    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
31
    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
32
    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
33
    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
34
    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
35
    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
36
    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
37
    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
38
    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
39
    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
40
    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
41
  ];
42

43
  readonly hotSettings: GridSettings = {
44
    columns: [
45
      {
46
        title: 'Model',
47
        type: 'text',
48
        data: 'model',
49
        width: 150,
50
        headerClassName: 'htLeft',
51
      },
52
      {
53
        title: 'Price',
54
        type: 'numeric',
55
        data: 'price',
56
        width: 80,
57
        locale: 'en-US',
58
        numericFormat: {
59
          style: 'currency',
60
          currency: 'USD',
61
          minimumFractionDigits: 2,
62
        },
63
        className: 'htRight',
64
        headerClassName: 'htRight',
65
      },
66
      {
67
        title: 'Date',
68
        type: 'intl-date',
69
        data: 'sellDate',
70
        width: 130,
71
        locale: 'en-US',
72
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
73
        className: 'htRight',
74
        headerClassName: 'htRight',
75

76
      },
77
      {
78
        title: 'Time',
79
        type: 'intl-time',
80
        data: 'sellTime',
81
        width: 90,
82
        locale: 'en-US',
83
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
84
        className: 'htRight',
85
        headerClassName: 'htRight',
86
      },
87
      {
88
        title: 'In stock',
89
        type: 'checkbox',
90
        data: 'inStock',
91
        className: 'htCenter',
92
        headerClassName: 'htCenter',
93
      },
94
    ],
95
    width: '100%',
96
    height: 300,
97
    stretchH: 'all',
98
    contextMenu: true,
99
    rowHeaders: true,
100
    colHeaders: true,
101
    autoWrapRow: true,
102
    autoWrapCol: true,
103
    autoRowSize: true,
104
    dialog: {
105
      content:
106
      '<h2 id="example6-title">Title</h2><p id="example6-description">Description</p>',
107
      a11y: {
108
        role: 'alertdialog',
109
        ariaLabel: 'Title',
110
        ariaLabelledby: 'example6-title',
111
        ariaDescribedby: 'example6-description',
112
      },
113
      closable: true,
114
    },
115
  };
116

117
  ngAfterViewInit() {
118
    const hotInstance = this.hotTable.hotInstance;
119

120
    if (hotInstance) {
121
      // Show dialog after initialization
122
      const dialogPlugin = hotInstance.getPlugin('dialog');
123
      dialogPlugin.show();
124
    }
125
  }
126
}
127
/* end-file */
128

129

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

138
/* start:skip-in-compilation */
139
import { AppComponent } from './app.component';
140
/* end:skip-in-compilation */
141

142
// register Handsontable's modules
143
registerAllModules();
144

145
export const appConfig: ApplicationConfig = {
146
  providers: [
147
    {
148
      provide: HOT_GLOBAL_CONFIG,
149
      useValue: {
150
        license: NON_COMMERCIAL_LICENSE,
151
      } as HotGlobalConfig
152
    }
153
  ],
154
};
155

156
@NgModule({
157
  imports: [ BrowserModule, HotTableModule, CommonModule ],
158
  declarations: [ AppComponent ],
159
  providers: [...appConfig.providers],
160
  bootstrap: [ AppComponent ]
161
})
162

163
export class AppModule { }
164
/* end-file */

1
<div>
2
  <app-example7></app-example7>
3
</div>

Programmatic control

You can control the dialog programmatically using the plugin’s methods.

Show and hide dialog

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

5
@Component({
6
  selector: 'app-example8',
7
  template: `
8
    <div style="margin-bottom: 16px; display: flex; gap: 10px;">
9
      <button (click)="showDialog()">Show Dialog</button>
10
      <button (click)="hideDialog()">Hide Dialog</button>
11
    </div>
12
    <hot-table
13
      #hotTable
14
      [settings]="hotSettings!"
15
      [data]="hotData"
16
    >
17
    </hot-table>
18
  `,
19
  standalone: false
20
})
21
export class AppComponent {
22
  @ViewChild('hotTable') hotTable!: HotTableComponent;
23

24
  readonly hotData = [
25
    { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
26
    { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
27
    { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
28
    { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
29
    { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
30
    { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
31
    { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
32
    { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
33
    { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
34
    { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
35
    { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
36
    { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
37
    { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
38
    { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
39
    { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
40
    { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
41
    { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
42
    { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
43
    { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
44
    { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
45
  ];
46

47
  readonly hotSettings: GridSettings = {
48
    columns: [
49
      {
50
        title: 'Model',
51
        type: 'text',
52
        data: 'model',
53
        width: 150,
54
        headerClassName: 'htLeft',
55
      },
56
      {
57
        title: 'Price',
58
        type: 'numeric',
59
        data: 'price',
60
        width: 80,
61
        locale: 'en-US',
62
        numericFormat: {
63
          style: 'currency',
64
          currency: 'USD',
65
          minimumFractionDigits: 2,
66
        },
67
        className: 'htRight',
68
        headerClassName: 'htRight',
69
      },
70
      {
71
        title: 'Date',
72
        type: 'intl-date',
73
        data: 'sellDate',
74
        width: 130,
75
        locale: 'en-US',
76
        dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },
77
        className: 'htRight',
78
        headerClassName: 'htRight',
79

80
      },
81
      {
82
        title: 'Time',
83
        type: 'intl-time',
84
        data: 'sellTime',
85
        width: 90,
86
        locale: 'en-US',
87
        timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },
88
        className: 'htRight',
89
        headerClassName: 'htRight',
90
      },
91
      {
92
        title: 'In stock',
93
        type: 'checkbox',
94
        data: 'inStock',
95
        className: 'htCenter',
96
        headerClassName: 'htCenter',
97
      },
98
    ],
99
    width: '100%',
100
    height: 300,
101
    stretchH: 'all',
102
    contextMenu: true,
103
    rowHeaders: true,
104
    colHeaders: true,
105
    autoWrapRow: true,
106
    autoWrapCol: true,
107
    autoRowSize: true,
108
    dialog: {
109
      content: 'This dialog can be controlled programmatically.',
110
      closable: true,
111
    },
112
  };
113

114
  showDialog() {
115
    const hotInstance = this.hotTable.hotInstance;
116

117
    if (hotInstance) {
118
      hotInstance.getPlugin('dialog').show();
119
    }
120
  }
121

122
  hideDialog() {
123
    const hotInstance = this.hotTable.hotInstance;
124

125
    if (hotInstance) {
126
      hotInstance.getPlugin('dialog').hide();
127
    }
128
  }
129
}
130
/* end-file */
131

132

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

141
/* start:skip-in-compilation */
142
import { AppComponent } from './app.component';
143
/* end:skip-in-compilation */
144

145
// register Handsontable's modules
146
registerAllModules();
147

148
export const appConfig: ApplicationConfig = {
149
  providers: [
150
    {
151
      provide: HOT_GLOBAL_CONFIG,
152
      useValue: {
153
        license: NON_COMMERCIAL_LICENSE,
154
      } as HotGlobalConfig
155
    }
156
  ],
157
};
158

159
@NgModule({
160
  imports: [ BrowserModule, HotTableModule, CommonModule ],
161
  declarations: [ AppComponent ],
162
  providers: [...appConfig.providers],
163
  bootstrap: [ AppComponent ]
164
})
165

166
export class AppModule { }
167
/* end-file */

1
<div>
2
  <app-example8></app-example8>
3
</div>

Configuration options

dialog

Plugins

Dialog

Dialog

Overview

Basic configuration

Content types

Plain text content

HTML content

Template types

Background variants

Content background

Dialog accessibility

Programmatic control

Show and hide dialog

Related API reference