ngneat / edit-in-place Goto Github PK
View Code? Open in Web Editor NEWA flexible and unopinionated edit in place library for Angular applications
Home Page: https://ngneat.github.io/edit-in-place
License: MIT License
A flexible and unopinionated edit in place library for Angular applications
Home Page: https://ngneat.github.io/edit-in-place
License: MIT License
Please update the package to support Angular 10.
When I am updating the angular application I am getting below error.
y metadata from registry...
Package "@ngneat/edit-in-place" has an incompatible peer dependency to "@angular/common" (requires "^8.0.0" (extended), would install "10.1.3").
Package "@ngneat/edit-in-place" has an incompatible peer dependency to "@angular/core" (requires "^8.0.0" (extended), would install "10.1.3").
Support request
I'm having two issues/questions:
Regarding the first issue, I'm not sure what the expected behaviour should be? Because it seems quite obvious that it should focus on the input field you have just switched to?
I've set the editableFocusable (since that seems related, however its not really clear how this would work exactly), I've tried manually focusing using (modeChange)="", but to no avail.
Thanks in advance.
No response
<editable (modeChange)="focus($event, 'fieldName')">
<ng-template viewMode>fieldValue</ng-template>
<ng-template editMode>
<input
editableOnEnter
editableOnEscape
editableFocusable
[formControl]="this.fieldControl"
value="fieldValue" />
</ng-template>
</editable>
No response
Angular 17.0.6
Ionic 7.1.5
Feature request
It looks like viewMode is always the default option and it is not possible to start with edit mode initially.
Allow initial mode to be programmatically set (either being view or edit mode).
No response
No response
No response
Feature request
You can switch to edit mode in any circumstances.
It should be very convenient to block programmatically the edition mode (disable it).
No response
There is lot of use-cases:
No response
Add @baxyz to the contributor list of the README file.
Feature/improvment (a behavior that used to work and stopped working in a new release)
Not sure if worth addressing but when using edit-on-place with Angular 17 I am getting the following error:
ERROR ReferenceError: document is not defined
at editMode (./node_modules/@ngneat/edit-in-place/fesm2020/ngneat-edit-in-place.mjs:83:55)
at editMode (./node_modules/@ngneat/edit-in-place/fesm2020/ngneat-edit-in-place.mjs:90:43)
at value (./node_modules/rxjs/dist/esm/internal/operators/switchMap.js:14:23)
at _next (./node_modules/rxjs/dist/esm/internal/operators/OperatorSubscriber.js:13:21)
at next (./node_modules/rxjs/dist/esm/internal/Subscriber.js:31:18)
at _subscribe (./node_modules/rxjs/dist/esm/internal/BehaviorSubject.js:12:44)
at _trySubscribe (./node_modules/rxjs/dist/esm/internal/Observable.js:37:25)
at _trySubscribe (./node_modules/rxjs/dist/esm/internal/Subject.js:74:22)
at cb (./node_modules/rxjs/dist/esm/internal/Observable.js:31:30)
at errorContext (./node_modules/rxjs/dist/esm/internal/util/errorContext.js:19:9)
Should work out of the box with SSR
NA will try and get around to given time
NA. For some reason started coming across this issue with Angular. I suspect because domino which mocks window and document does not work with Angular 17.
1. Mac OS
2. Angular 17
[ ] Regression (a behavior that used to work and stopped working in a new release)
[X ] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
When using the click
event for openBindingEvent
and closeBindingEvent
along with the editableOnSave
and editableCancel
directives, the mode won't switch to view
when clicking the editableOnSave
or editableCancel
elements.
When using a single click for the open/close binding event and the editableOnSave
or editableCancel
directives, clicking an element using the directives (ie: button) should trigger a closeBindingEvent
(if using the click
event) in addition to calling a method.
Update playground to use click
for openBindingEvent
, then try Sample input with action buttons
, by clicking into it for edit mode, then using the buttons to try to change the mode back to view.
To allow for a simple click to change mode and then to use the save or cancel buttons or a click outside element to change back to view mode.
Angular version: 10.1.3
Browser:
- [ X] Chrome (desktop) version 86.0.4240.198
For Tooling issues:
- Node version: 12.16.1
- Platform: Windows
Bug report
I switch to standalone. Everything works great until I add component in html. I import EditableComponent in standalone imports but I receive this error:
ERROR TypeError: can't access property "tpl", ctx.viewModeTpl is undefined
EditableComponent_Template ngneat-edit-in-place.mjs:22
<editable (save)="updateStage()">
<ng-template viewMode>hello world</ng-template>
<ng-template editMode>
<input editableOnEnter editableOnEscape editableFocusable />
</ng-template>
</editable>
@Component({
selector: 'app-bot-flow',
templateUrl: './bot-flow.component.html',
styleUrls: ['./bot-flow.component.scss'],
standalone: true,
imports: [HorizontalTreeMenuComponent, NgIf, FormsModule, BotActionsListComponent, EditableComponent,EditModeDirective]
})
Angular: v17.0.4
edit in place : v1.9.0
No response
No response
No response
No response
Regression (a behavior that used to work and stopped working in a new release)
In 1.6.1 everything is working great.
in 1.9.0 import {EditableModule} from "@ngneat/edit-in-place";
throws error that it can't import the module TS2305: Module "@ngneat/edit-in-place" has no exported member EditableModule
No response
No response
No response
No response
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[ x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
There is no means (that I can tell) to track an outside click to disable the editing for a group, and doing so should be relatively straight forward if the directive was exposed for use in another custom directive.
I would love to be able to somehow change modes for a group when an outside click is detected.
I can think of a couple of ways to accomplish this. One is just writing my own directive to handle it, but because this lib does not export the EditableGroupDirective, I have no means to inject it into my own directive to make changes. Could the change be made to export the directive?
Create a table where the <tr>
is both editableGroup and editableGroupEdit. Clicking on the <tr>
turns on editing for the row but if I want to capture a click anywhere else in the document, I have no way of doing that.
Turning off edit mode in one fell swoop without a dedicated button.
Bug report
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)
That the package should work like before the update.
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>
No response
No response
Feature request
There's no way to trigger Edit & View mode programmatically. This would be a helpful feature
An @input() directive for both Edit as well as View mode activation.
Being able to trigger the View mode and Edit mode programmatically would be a great addition. Can be used in a lot of scenarios where we want some outside event to trigger the respective modes.
No response
Feature request
Currently on Angular 17
Should be available for Angular 18 as well
No response
No response
No response
[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
On first load of an editableGroup, clicking on the contained editables does not trigger edit mode.
After going into edit mode using a defined button and then going back in view mode, clicking on the contained editables trigger the edit mode for the target editable
Clicking on editables inside an editableGroup never trigger the edit mode.
I was not able to reproduce on the demo page (is it running the latest release 1.3.0?)
Angular version: 11.0.0
Browser:
- [X] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
Regression (a behavior that used to work and stopped working in a new release)
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.
Buttons with those directives should produce events.
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"
}
No response
Node v18. Ubuntu 20.
Bug report
I am getting an error indicating that the EditableModule is not exported from @ngneat/edit-in-place. I am on @ngneat/edit-in-place version 1.9.0 and using Angular 17.
As in the documentation https://www.npmjs.com/package/@ngneat/edit-in-place, I should be able to import the EditableModule from "@ngneat/edit-in-place"
In Angular 17 app.component.ts, with @ngneat/edit-in-place version 1.9.0 installed:
import { EditableModule } from '@ngneat/edit-in-place';
Typescript error: Module '"@ngneat/edit-in-place"' has no exported member 'EditableModule'.ts(2305)
And ng serve
fails
The library is installed and my app is otherwise working, as I have been able to import individual directives and the EditableComponent
from @ngneat/edit-in-place
No response
No response
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
Would it be possible to incorporate an editableModeChange()
event on the EditableComponent? Or possibly an onEdit()
or onView()
event if it conflicts with the EditableGroupDirective?
There's some simple use cases such as opening a dropdown automatically on edit-mode that would be convenient. I attempted tying into the editMode$
observable but that gets fired multiple times.
Bug report
In an Angular 12 project when I install the package with ng add @ngneat/edit-in-place
I receive the following warning:
"SchematicsEditInPlaceAdd" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID.
No problems at the moment. Just wanted to let you know.
No response
No response
No response
No response
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[ x ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
For the moment I need the mouse to edit a field.
Use the keyboard to edit the field. It would be great to extend openBindingEvent
and closeBindingEvent
to other event than mouse. This will allow to control the editor/preview mode from the outside.
Make the edition more efficient.
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[ x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
Unable to change style of the component view mode.
the ability to change/update styles with accessing classes/ for making it look like a link - or any use case required to fit needs.
Attempt to style viewMode
My instance is making a header for a form editable. However, the requirements necessary want it underlined to show it can be edited, with an indicator to the right of the object, simple and straight forward, but I cannot simply make this happen at this time...
Angular version: 11.0.6
Browser:
For Tooling issues:
Others:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.