Component data is not refreshed when removing data from component

[cwuerzlhuber]

Hello. I am currently facing an issue with the aem-component directive, not updating the component data correctly, when properties of the component got removed while authoring the page.

Steps to reproduce:

1. Use Simple component (e.g. Text Component from WKND SPA Angular Tutorial)
2. On AEM Author, add component, open dialog and add some text
3. Close the dialog while saving the data -> the component will correctly update it's data
4. Open Dialog again and remove the text again and save the dialog

Current behaviour:

The component will render the placeholder (because the component is considered as empty), but the text is still visible in the background.

Expected behaviour:

The component will render the placeholder (because the component is considered as empty), but also the correct component state is passed to the instance of the mapped angular component.

Hints:

This is due to the fact, that the aem-component directive is using the cqItem property to update the component data, and uses the properties of the cqItem object to update the components state. If a property is missing (because it was removed by the author), it's value will not be updated in the instantiated component.

Proposal to resolve the issue:

When the directive receives a new state using ngOnChanges, the directive should find the changes compared to the previous value, and update all changed values accordingly.

[SushantBhasin]

This is a common problem on both angular and react components as data received from modelManager does not contain the removed properties hence they are not updated.
It should be fixed by adobe/aem-spa-page-model-manager#32

[SushantBhasin]

Fixed by v1.2.3 of https://github.com/adobe/aem-spa-page-model-manager