ctx.viewModeTpl is undefined after updating to 1.9

[antiftw]

I'm submitting a

Bug report

Current behavior

When updating a project, I noticed the error as also mentioned in this issue, so I thought I'd update to the newest version of this package.

However this resulted in a non-functional page, as it now gives the error when going to the page

ERROR TypeError: ctx.viewModeTpl is undefined
    _class3_Template ngneat-edit-in-place.mjs:25
    Angular 34
    RxJS 6
    Angular 21
    webpackJsonpCallback jsonp chunk loading:77

It compiles without issues, however also my tests now fail with a similar error.

For example the test

  it('should create', () => {
    expect(component).toBeTruthy();
  });

results in:

Failed: Cannot read properties of undefined (reading 'tpl'):

 at templateFn (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ngneat/edit-in-place/fesm2022/ngneat-edit-in-place.mjs:25:84)
    at executeTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:12003:13)
    at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13498:13)
    at detectChangesInView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13663:9)
    at detectChangesInComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13638:5)
    at detectChangesInChildComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13676:9)
    at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13548:13)
    at detectChangesInView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13663:9)
    at detectChangesInComponent (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13638:5)
    at detectChangesInChildComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13676:9)

Expected behavior

That the package should work like before the update.

Minimal reproduction of the problem with instructions

• Angular 16.2.10
• Ionic 7.1.1
• @ngneat/edit-in-place version 1.9.0

component.ts :

import { EditableComponent } from '@ngneat/edit-in-place';

@Component({
  ...
  standalone: true,
  imports: [
    ...,
    EditableComponent,
  ],
})

component.html:

<editable (save)="update(this.displayNameControl, 'displayName')">
    <ng-template viewMode>
         {{ displayName }}
         <ion-icon class="edit" name="pencil"></ion-icon>
    </ng-template>
    <ng-template editMode>
         <input
           editableOnEnter
           editableOnEscape
           [formControl]="this.displayNameControl" />
   </ng-template>
</editable>

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

No response

Environment

No response

[geromegrignon]

Hello, the library is now using Standalone API.
As included in the documentation, the mandatory imports are EditableComponent, ViewModeDirective and EditModeDirective.

[antiftw]

Appreciate the quick response, (and the updated README ;))

Did not realize the Directive imports were mandatory. Added them and it works like expected.

Thanks again!

[antiftw]

Hmm, seems it does not completely work as expected still.

Yes, the errors are gone, but when I click the text in viewMode it does nothing, and only after I resize the window the viewMode changes to editMode.

Want me to open a new issue or?

[geromegrignon]

Yes please for a better understanding, please provide as much context as possible so I can help.

[antiftw]

@geromegrignon fyi

Decided to dive a bit deeper and try some stuff out.

Installed a fresh Angular 17 with Ionic and then it worked without issues, so I thought I'd try upgrading my own project to 17 and that seems to have fixed it.

So wont be creating a new issue, just thought I'd let you know.

Thanks again for the fast replies, really appreciate it.