ng2-handsontable | Angular 2 directive | Grid library

Add ng2-handsontable to your package.json or install with npm i ng2-handsontable --save. The latest version of ng2-handsontable only works for Angular5+. For Angular2 or Angular4 use ng2-handsontable@2. If you are using SystemJS, add the ng2-handsontable path to your SystemJS.config.js: 'ng2-handsontable': 'node_modules/ng2-handsontable/bundles/ng2-handsontable.umd.js'. Webpack (used by Angular-CLI) picks up the path automatically.
Add ng2-handsontable to your package.json or install with npm i ng2-handsontable --save. The latest version of ng2-handsontable only works for Angular5+. For Angular2 or Angular4 use ng2-handsontable@2.
If you are using SystemJS, add the ng2-handsontable path to your SystemJS.config.js: 'ng2-handsontable': 'node_modules/ng2-handsontable/bundles/ng2-handsontable.umd.js'. Webpack (used by Angular-CLI) picks up the path automatically.
Import the HotTableModule into your module. Here's a TypeScript example:
Use the hot-table component in your template. The following example displays the supported attributes:
data: any[] - data source
pageData: Observable<any[]> - observable data source for paged data
columns?: any[] - descriptors of columns that contains information regarding type, format, source, ... of particular column
colHeaders?: string[] - array of column headers, default column headers will be shown (or not be shown, it depends on other settings) if this parameter is undefined
colWidths?: number[] - array of column sizes, default column size will be applied if this parameter is undefined
options?: any - any of the Handsontable options
hotInstanceCreated - Emits the Handsontable instance after it has been created. (Alternatively the this-context of the Handsontable hooks init() or afterInit() could be used.)
'HANDSONTABLE_EVENT' - all Handsontable events are implemented as EventEmitters, e.g. (beforeInit)="onBeforeInit".
The following methods are available as a public API on HotTableComponent (which you can access from your parent component with @ViewChild(HotTableComponent) hotTableComponent):
getHandsontableInstance(): Handsontable - returns the underlying Handsontable Core instance; all registered Handsontable plugins are accessible via instance.getPlugin()
markAsChanged(properties: ('data' | 'options' | 'colHeaders' | 'colWidths' | 'columns')[])- Call this function to mark any of the given input properties as changed in case they were changed partially, rather than replaced by a new object. The component picks up the latter through Angular's ngOnChanges(), but not the former. For example, when a new row is added to an existing 'data' input array, call markAsChanged(['data']).
See the demo and the demo sources for further details.