v1.9, with angular 17.3 no longer fires an event from buttons with editableOnCancel or editableOnSave directives.

[maurice-does-software]

I'm submitting a

Regression (a behavior that used to work and stopped working in a new release)

Current behavior

The view switches from viewMode template to editMode template, but then neither of my two buttons fire an event, so user can't go back to view mode or save changes. I tried changing the (save) attribute to (modeChange), but if some event is firing from either button, neither of those picks it up.

Expected behavior

Buttons with those directives should produce events.

Minimal reproduction of the problem with instructions

in component ts file:

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

...

indicateSaveClicked (){ alert('Save clicked.'); }

in template:

            <editable (save)="indicateSaveClicked()">
              <ng-template viewMode><a class="btn btn-light">{{ user.$commissionLevel?.name || '(Unspecified)' }}</a></ng-template>
              <ng-template editMode>
                <select class="form-control"
                  style="width:10rem"
                  editableOnEnter
                  editableOnEscape
                  [(ngModel)]="tmpCommLvlId"
                  name="tmp-comm-lvl-id">
                  @for (opt of user.$commissionLevelOpts; track opt) {
                  <option [value]="opt.id">{{opt.name}}</option>
                  }
                </select>
                <button class="btn btn-light"
                  editableOnCancel>
                  <i class="fa fa-close"></i>
                </button>
                <button class="btn btn-primary"
                  editableOnSave>
                  <i class="fa fa-check"></i>
                </button>
              </ng-template>
            </editable>

from my package.json:

  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/cdk": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/elements": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/localize": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@angular/upgrade": "^17.3.0",
    "@fortawesome/angular-fontawesome": "^0.14.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-brands-svg-icons": "^5.15.2",
    "@fortawesome/free-regular-svg-icons": "^5.15.2",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
    "@ng-select/ng-select": "^12.0.4",
    "@ngneat/edit-in-place": "^1.9.0",
    "@popperjs/core": "^2.11.8",
    "@stripe/stripe-js": "^3.0.10",
    "@tinymce/tinymce-angular": "^7.0.0",
    "bootstrap": "^4.5.0",
    "d3": "^7.8.5",
    "eslint-config-prettier": "^9.1.0",
    "font-awesome": "^4.7.0",
    "ng-mocks": "^14.12.1",
    "ng-qrcode": "^17.0.0",
    "ngx-image-cropper": "^7.2.1",
    "ngx-mask": "^15.0.0",
    "ngx-stripe": "^17.1.1",
    "papaparse": "^5.4.1",
    "rxjs": "~6.6.0",
    "tinymce": "^6.7.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.0",
    "@angular-eslint/builder": "17.2.1",
    "@angular-eslint/eslint-plugin": "17.2.1",
    "@angular-eslint/eslint-plugin-template": "17.2.1",
    "@angular-eslint/schematics": "17.2.1",
    "@angular-eslint/template-parser": "17.2.1",
    "@angular/cli": "^17.3.0",
    "@angular/compiler-cli": "^17.3.0",
    "@cypress/schematic": "^2.5.1",
    "@types/d3": "^7.4.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "6.13.1",
    "@typescript-eslint/eslint-plugin-tslint": "^6.14.0",
    "@typescript-eslint/parser": "6.13.1",
    "codelyzer": "^6.0.0",
    "cypress": "^13.7.0",
    "eslint": "^8.54.0",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-jsdoc": "^46.9.0",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "jasmine-core": "~5.1.2",
    "jasmine-spec-reporter": "~7.0.0",
    "js-beautify": "^1.14.11",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "otplib": "^12.0.1",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~5.4.2"
  }

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

No response

Environment

Node v18. Ubuntu 20.

[geromegrignon]

Hello, the library is now using the Standalone API, so you have to import all the directives you use in your component individually.

[smonff]

It took me some time to understand what it means: we have to import the EditableOnEnterDirective, EditableOnEscapeDirective, etc directives in the class @Component({ imports: [ ... ]}) decorator.

[geromegrignon]

Hi @smonff, I confess I'm used to WebStorm and could not figure out how it was a problem as I have the template highlighted if a directive is not imported. I just tried Visual Studio Code with Angular language service extension and discovered it was not a feature.

There is an open issue for it: angular/vscode-ng-language-service#2011

[smonff]

Same in Emacs, that use LSP.