Editable Data Tree Grid in Angular 7+ - html

Question

What is the quickest and easiest way to implement an editable tree grid in Angular 7 (and above) ? I have tried to use ng angular-tree-grid, but got stuck, at the below code i implemented so far.
Template:
<db-angular-tree-grid #angularGrid [data]="data"
[configs]="configs"
(rowdelete)="onRowDelete($event)"
(rowsave)="onRowSave($event)"
(rowadd)="onRowAdd($event)">
</db-angular-tree-grid>
I have been unable to get the onRowAdd() and onRowDelete() methods to work. I need to call a POST endpoint on my c# webApi, within onRowAdd().
Typescript:
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);
}
}