Handsontable example

by Jens Kühn

HTML

<app-root></app-root>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">
<script src="https://handsontable.com/docs/7.2.2/scripts/jsfiddle-fixer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rxjs@6/bundles/rxjs.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/core-js@2/client/core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/zone.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/compiler@7/bundles/compiler.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/core@7/bundles/core.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/common@7/bundles/common.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/platform-browser@7/bundles/platform-browser.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/platform-browser-dynamic@7/bundles/platform-browser-dynamic.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/[email protected]/bundles/handsontable-angular.umd.min.js"></script>

TypeScript

// app.component.ts
  import { Component } from '@angular/core';
  import * as Handsontable from 'handsontable';
  
  @Component({
    selector: 'app-root',
    template: `
    <div class="hot">
      <hot-table
        [settings]="hotSettings"
        [hotId]="id">
      </hot-table>
    </div>
    `,
  })
  class AppComponent {
    hotSettings: Handsontable.GridSettings = {
      startRows: 5,
      startCols: 5,
      colHeaders: true,
      stretchH: 'all',
      columns: [{validator: /^[0-9]$/}]
    };
    id = 'my-custom-id';
  }
  
  // app.module.ts
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { HotTableModule } from '@handsontable/angular';
  
  @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) });