v1.9, with angular 17.3 no longer fires an event from buttons with editableOnCancel or editableOnSave directives. #124
Description
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.