Incorrect initialization order for editableGroup+editable

[rdamazio]

I'm submitting a

Bug report

Current behavior

Upon loading any page that has editables inside a editableGroup (including the examples app), this error comes up in the console:

main.ts:12 ERROR TypeError: Cannot read properties of undefined (reading 'unsubscribe')
    at editable-group.directive.ts:19:58
    at Array.forEach (<anonymous>)
    at _QueryList.forEach (core.mjs:27903:23)
    at editable-group.directive.ts:19:21
    at core.mjs:15076:9
    at _ZoneDelegate.invoke (zone.js:344:158)
    at _Zone.run (zone.js:127:37)
    at _NgZone.runOutsideAngular (core.mjs:14593:28)
    at AfterRenderCallback.invoke (core.mjs:15093:23)
    at AfterRenderCallbackHandlerImpl.execute (core.mjs:15137:26)

Expected behavior

No error!

Minimal reproduction of the problem with instructions

$ jj git clone https://github.com/ngneat/edit-in-place.git
$ cd edit-in-place
$ npm install
$ ng serve

then opening the sample app and checking the console

What is the motivation / use case for changing the behavior?

The initialization is not being completed properly because of this.

I suspect this issue was introduced in commit 2054a83, where calling this.handleViewMode() moved from ngOnInit to an afterNextRender callback - the issue is that viewHandler gets initialized during the editable's afterRender callback (formerly ngOnInit), but is referenced earlier than that in the editableGroup's afterRender callback (formerly ngAfterViewInit, which was after ngOnInit).

Environment

No response