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.