Редактируемая сетка дерева данных в Angular 7+

Question

Какой самый быстрый и простой способ реализовать редактируемую сетку дерева в Angular 7 (и выше)? Я пытался использовать ng angular -tree-grid, но застрял в приведенном ниже коде, который я реализовал.

Шаблон:

<db-angular-tree-grid #angularGrid [data]="data" 
                      [configs]="configs" 
                      (rowdelete)="onRowDelete($event)" 
                      (rowsave)="onRowSave($event)" 
                      (rowadd)="onRowAdd($event)">
</db-angular-tree-grid>  

Мне не удалось получить методы onRowAdd () и onRowDelete () для работы. Мне нужно вызвать конечную точку POST на моем c# webApi, в onRowAdd ().

Машинопись:

export class GridComponent {
   @ViewChild('angularGrid') angularGrid: AngularTreeGridComponent;

  data: any = [
    { id: 1, planName: 'Functional Test',parent: 0},
    { id: 2, planName: 'Non Functional Test', parent: 0},
    { id: 3, planName: 'Component', parent: 1}
  ];
    configs: any = {
    id_field: 'id',
    parent_id_field: 'parent',
    parent_display_field: 'planName',
    actions: {
      add: true,
      edit: true,
      delete: true,
      edit_parent: true,
      add_parent: true,
      delete_parent: true,
      resolve_add: true,
      resolve_delete: true,
      resolve_edit: true
    },
    css: { // Optional
      expand_class: 'fa fa-caret-right',
      collapse_class: 'fa fa-caret-down',
      add_class: 'fa fa-plus',
      edit_class: 'fa fa-pencil',
      delete_class: 'fa fa-trash',
      save_class: 'fa fa-save',
      cancel_class: 'fa fa-remove',
    },
    columns: [
      {
        name: 'planName',
        header: 'PlanName',
        editable: true
      }
    ]
  };

  onRowAdd($e) {
    const data = $e.data;
    setTimeout(() => {
      $e.resolve();
    }, 1000);      
  }

  onRowSave($e) {
    const data = $e.data;
    setTimeout(() => {
      $e.resolve();
    }, 1000);
  }

  onRowDelete($e) {
    setTimeout(() => {
      $e.resolve();
    }, 1000);
  }
}