Insert, delete and update based on a flag

Tags: #<Tag:0x00007f8b28ca1650>

Hi,
I am currently using Handson table with angular 7 and want to know how I can perform all the functions using a flag. As i have to make API calls for all 3 different operations (insert, delete and edit), how can i detect changes in the table and differentiate them and make the required API calls.

Welcome @bhavrao8

if by writing

insert, delete and edit

you meant the data, not the rows/column you need only one hoo - the afterChange.

Here’s an example https://jsfiddle.net/73t9cLmk/

1 Like

Hi Aleksandra,

I did try this hook. But it just triggers when i edit the table. i want to know if it can be used for delete or insert of a row too. Because in the console it just shows “edit” when we make a change and this hook is fired. Can it show “insert” or “delete”?

For the rows and columns we have separate hooks.

Creating
afterCreateCol
afterCreateRow
beforeCreateCol
beforeCreateRow

Deleting
afterRemoveCol
afterRemoveRow
beforeRemoveCol
beforeRemoveRow

1 Like

Ok. Thank you. Also, can you please help me to extract the changed data from the hook response. When i use afterChange hook, the row, column, old value and new value is present in the ‘changes’ array. But i want to extract out the changed data and push it into another array/object so i can send it to the backend through API call. I tried many things but i was not able to. Can you please tell me how to do it?

If you need the whole data you can just ask for the getData method in the afterChange hook.
Here is an example https://jsfiddle.net/s75xcozj/

1 Like

Hi,
Yes the above thing does work but as soon as I try to get it out of the hook, the value becomes undefined. But i need the data outside of the hook to be sent in the API call. How can i make that possible?

Hey @bhavrao8

here’s https://jsfiddle.net/4t2x8zfy/2/ an example for afterChange hook calling the getData method in Angular 7.

Let me know if it works for you.

1 Like

Hey,

Can i call the getData method outside of the hook?

Yes, of course. Here’s an example with an external button calling getData() method https://stackblitz.com/edit/angular-bmdytw?file=src/app/app.component.html

1 Like

Got it. Thank you.