This page covers a non-latest version of Handsontable.
# Custom context menu in Angular
Table of contents
# Overview
The following is an implementation of the @handsontable/angular
component with a custom context menu added.
# Example
// app.component.ts
import { Component } from '@angular/core';
import Handsontable from 'handsontable/base';
import { ContextMenu } from 'handsontable/plugins/contextMenu';
import { createSpreadsheetData } from './helpers';
@Component({
selector: 'app-root',
template: `
<div>
<hot-table [settings]="hotSettings"></hot-table>
</div>
`,
})
class AppComponent {
hotSettings: Handsontable.GridSettings = {
data: createSpreadsheetData(5, 5),
colHeaders: true,
contextMenu: {
items: {
'row_above': {
name: 'Insert row above this one (custom name)'
},
'row_below': {},
'separator': ContextMenu.SEPARATOR,
'clear_custom': {
name: 'Clear all cells (custom)',
callback: function() {
this.clear();
}
}
}
},
height: 'auto',
licenseKey: 'non-commercial-and-evaluation'
};
}
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HotTableModule } from '@handsontable/angular';
import { registerAllModules } from 'handsontable/registry';
// register Handsontable's modules
registerAllModules();
@NgModule({
imports: [ BrowserModule, HotTableModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
class AppModule { }
// bootstrap
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => { console.error(err) });
# Related articles
# Related guides
# Related blog articles
# Related API reference
- Configuration options:
- Hooks:
- Plugins: