HandsonTable event not firing

Question

I am using Angular 6.1.1 and HandsonTables 5.0.0

My hot table is being display correctly and populated with data. I've set one column to be editable but when I change the value by typing into the column the afterChange event is not firing at all, the configuration is shown below.

Component HTML:

<hot-table [hotId]="hotInstance" [settings]="hotSettings"
           [data]="dataset" (afterChange)="onAfterChange($event)"></hot-table>

Component TS (ngOnInit and FetchData being called ok, onAfterChange isn't raised when I edit FieldA):

export class PartsComponent implements OnInit {

dataset: any;
fetched = false;
error = false;
hotInstance: string = 'hot';
user : object = {};

hotSettings = { };

constructor(private route: ActivatedRoute, 
private location: Location, 
private repositoryService: RepositoryService,
private hotRegisterer: HotTableRegisterer,
private auth: AuthService) { 


  const $component = this;

  this.hotSettings = {
    colHeaders: ['System ID', 'Field A', 'Field B.'],
    columns: [
      {
        data: 'Id',
        type: 'numeric',
        readOnly: true
      },
      {
        data: 'FieldA',
        type: 'text',
        readOnly: false
      },
      {
        data: 'FieldB',
        type: 'text',
        readOnly: true
      }
    ],
    allowInsertColumn: false,
    allowRemoveColumn: false,
    selectionMode: 'single',
    //contextMenu: ['remove_row'],
    rowHeaders: true,
    filters: true,
    dropdownMenu: ['filter_by_condition', 'filter_action_bar'],
    height: 400,
    outsideClickDeselects: false,
    hiddenRows: {
      indicators: false
    }
  };
}

 ngOnInit() {
   this.auth.getUser().subscribe(
    usr => {
      console.debug('parts.ngOnInit()');
      console.debug(usr);
      this.fetchData();
    }, e => console.debug(e)
  );
 }

fetchData():void {
  console.debug("fetchData()")
  this.repositoryService.getParts()
    .subscribe(
      parts => this.dataset = parts,
      err => this.error = true,
      () => this.fetched = true
    );
}


onAfterChange($event) {
  console.debug('onAfterChange()'); \\ <--- not being called 
  console.debug($event);

}



}

Wojciech Czerniak Wojciech Czerniak · Accepted Answer · 2018-10-19T10:44:24

You're not saying anything about angular-handsontable version you are using. My answer is based on the current release.

Handsontable hooks are not Angular events. Events are "trigger and forget" kind of function, Handsontable uses callbacks so they can cancel action or modify data. Callbacks should be binded as inputs, not outputs.

Check angular-handsontable release notes for details: https://github.com/handsontable/angular-handsontable/releases/tag/2.0.0

HandsonTable event not firing

1 Answers