Detect change in a variable of Angular component

Question

I got an array of objects, in similar structure to this:

arr = [ { key1: 'test', key2: 'text' } ]

This array and the object keys and values in it my be change, then possibly go back to original with user interactions on the page.

I got an unsaved changes feature to develop, where when I leave the component I wanna see if there were any changes (including deeply nested ones) in this array.

Is there a way to detect this change in angular?

Answer 1

I suppose you could use a service to store the original values. You could compare the current value to the original to see if there is a difference, and be able to reset it like you wanted.

Answer 2

when I leave the component I wanna see if there were any changes (including deeply nested ones)

The "when I leave" part suggests using the ngOnDestroy hook. Now, dependent on your use case, you can emit the current value to component's output, or feed it to a shared service (you didn't share much about your application's architecture).