Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ngneat/edit-in-place
A flexible and unopinionated edit in place library for Angular applications
https://github.com/ngneat/edit-in-place
angular form
Last synced: about 1 month ago
JSON representation
A flexible and unopinionated edit in place library for Angular applications
- Host: GitHub
- URL: https://github.com/ngneat/edit-in-place
- Owner: ngneat
- License: mit
- Created: 2020-07-10T08:42:13.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-04-29T19:39:29.000Z (5 months ago)
- Last Synced: 2024-05-01T11:39:41.367Z (5 months ago)
- Topics: angular, form
- Language: TypeScript
- Homepage: https://ngneat.github.io/edit-in-place
- Size: 3.21 MB
- Stars: 254
- Watchers: 7
- Forks: 18
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-angular - edit-in-place - A flexible and unopinionated edit in place library. (Table of contents / Third Party Components)
README
[]()
[]()
[]()
[](https://github.com/prettier/prettier)
[](#contributors-2)
[](https://github.com/ngneat/)
[]()
> A flexible and unopinionated edit in place library for Angular applications
Edit in place is a complete solution for switching modes between static content and an editable control that allows editing it.
Following open/closed principle, the library focuses on the switch mechanism, giving you full control of the data you want to update and the content you want to display and how to edit it.
[Demo](https://ngneat.github.io/edit-in-place)
## Features
- ✅ Fully customizable
- ✅ Manual trigger support
- ✅ Reactive Forms support
- ✅ Multiple Forms support
## Installation
`npm install @ngneat/edit-in-place`
## Usage
### version 1.9 and above
> The project is now using the Angular Standalone API and support SSR.
> It requires Angular 16+
Imports the **EditableComponent**, **EditModeDirective** and **ViewModeDirective** in the ìmports array of your **NgModule** or your standalone**Component**:
```typescript
import { EditableComponent, EditModeDirective, ViewModeDirective } from '@ngneat/edit-in-place';
@NgModule({
...
standalone: true,
imports: [EditableComponent, EditModeDirective, ViewModeDirective],
})
export class AppComponent {}
```
### version 1.6 and below
Add the `EditableModule` to your `AppModule`.
```typescript
import { EditableModule } from '@ngneat/edit-in-place';
@NgModule({
declarations: [AppComponent],
imports: [EditableModule],
bootstrap: [AppComponent]
})
export class AppModule {}
```
Now you can use the `` component:
```ts
@Component({
template: `
{{ value }}
`
})
class MyComponent {
value = 'foo';
control = new FormControl(this.value);
update() {
this.value = this.control.value;
}
cancel() {
this.control.setValue(this.value);
}
}
```
For more complex examples, check out the [playground](https://github.com/ngneat/edit-in-place/blob/master/src/app/app.component.html).
### Changing the Active Mode
Click on the `viewMode` template to switch it to `editMode` or click outside the editable component to switch back to `viewMode`.
You can customize the switch trigger which set to `click` by default by providing a `MouseEvent` type:
```html
...
```
You can also set this value globally by providing it in the `EDITABLE_CONFIG` provider:
```typescript
@NgModule({
...
providers: [
{
provide: EDITABLE_CONFIG,
useValue: {
openBindingEvent: 'dblclick',
closeBindingEvent: 'dblclick',
} as EditableConfig
}
]
})
export class AppModule {}
```
## Handle Events Manually
You can use the `editableOnUpdate` and `editableOnCancel` directives to trigger the update or the reset of the value on chosen elements.
```html
...
Save
Cancel
```
## Track event changes
You can use the `modeChange` event to know what is the state of a given `EditableComponent`.
```html
...
Save
Cancel
```
## Handle Focus
As a focusable form tag might be nested or custom, it isn't focused by default when the `editMode` is displayed.
To make it focusable, you can add the `editableFocus` directive on the input:
```html
...
```
## Events
Add the `(save)` event binding to handle the update of the content.
```html
...
```
The following actions will trigger this event:
- `editableOnEnter` directive
- `editableOnSave` directive
- `closeBindingEvent` @Input() MouseEvent
Optionally you can add the `(cancel)` event binding to handle the reset of the value of a formControl:
```html
...
```
The following actions will trigger this event:
- `editableCancel` directive
- `editableOnEscape` directive
## Inputs
| @Input | Type | Description | Default |
| ---------------------- | ------------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------- |
| openBindingEvent | `string` | The MouseEvent type to display the editMode | `click` |
| closeBindingEvent | `string` | The MouseEvent type to display the viewMode | `click` |
| enabled | `boolean` | Allows or forbids edit mode (doesn't switch to it) | `true` |
## Outputs
| @Output | Type | Description |
| ---------------------- | ------------------------- | ------------------------------------------------------------
| save | `void` | triggered by the editableOnSave and editableOnEnter directives and the MouseEvent on closeBindingEvent @Input |
| cancel | `void` | triggered by the editableCancel and editableOnEscape directives |
| modeChange | `edit` or `view` | triggered when the mode changes |
## Directives
#### editableFocusable
> import { EditableFocusableDirective } from '@ngneat/edit-in-place';
Focus the host element when switching to `editMode` (for nested inputs).
#### editableOnEnter
> import { EditableOnEnterDirective } from '@ngneat/edit-in-place';
Listen to keyup `enter` to switch to `viewMode` and update the value of the `viewMode` host element.
#### editableOnEscape
> import { EditableOnEscapeDirective } from '@ngneat/edit-in-place';
Listen to keyup `escape` to switch to `viewMode` without updating the value of the `viewMode` host element.
#### editableOnSave
> import { EditableOnSaveDirective } from '@ngneat/edit-in-place';
Listen to a `MouseEvent` on ths host element in order to switch to `viewMode` and udpate the value of the content of the `viewMode`*host element.
| @Input | Type | Description | Default |
| ---------------------- | ------------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------- |
| saveEvent | `string` | The MouseEvent type used to trigger the @Output() save | `click` |
#### editableOnCancel
Listen to a `MouseEvent` on ths host element in order to trigger to switch to `viewMode` without updating the value of the `viewMode` host element.
| @Input | Type | Description | Default |
| ---------------------- | ------------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------- |
| cancelEvent | `string` | The MouseEvent type used to trigger the @Output() cancel | `click` |
## Multiple Forms Usage
edit-in-place also supports switching between modes for multiple components at once.
Add the `editableGroup` directive on a parent html tag of your `editable` components:
```html
```
### Changing the Active Mode
> Unlike using a single `editable` component, an `editableGroup` doesn't support `MouseEvent` events on the component to switch modes.
You can switch modes by using dedicated directives on html button tag to switch mode for the whole group:
- `editableGroupEdit` to switch to `editMode`
- `editableGroupSave` to save the value of each form tag and switch to `viewMode`
- `editableGroupCancel` to switch to `viewMode` without saving the value of each form tag
```html
Edit
Save
Cancel
```
Add the `(editableModeChange)` event binding to keep track of the active mode.
It's triggered by the `editableGroupEdit`, `editableGroupSave` and `editableGroupCancel` directives.
```html
```
Add the `(save)` event binding to handle the update of the group.
It's triggered by the `editableGroupSave` directive:
```html
```
Optionally you can add the `(cancel)` event binding to handle the reset of the value of the group.
It's triggered by the `editableGroupCancel`:
```html
```
## Directives
#### editableGroup
> import { EditableGroupDirective } from '@ngneat/edit-in-place';
Overcharges the behavior of children editable Components to work as one entity.
| @Output | Type | Description |
| ---------------------- | ------------------------- | ------------------------------------------------------------
| save | `void` | triggered by the editableGroupSave directive |
| cancel | `void` | triggered by the editableGroupCancel directive |
| editableModeChange | `'view'` or `'edit'` | triggered by the editableGroupEdit, editableGroupSave and editableGroupCancel directives when switching modes |
#### editableGroupEdit
> import { EditableGroupEditDirective } from '@ngneat/edit-in-place';
Listen to a click `MouseEvent` to switch to *editMode*.
#### editableGroupSave
> import { EditableGroupSaveDirective } from '@ngneat/edit-in-place';
Listen to a click `MouseEvent` to switch to *viewMode* and update the value of the group.
#### editableGroupCancel
> import { EditableGroupCancelDirective } from '@ngneat/edit-in-place';
Listen to a click `MouseEvent` to switch to *viewMode* without updating the value of the group.
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Gérôme Grignon
💻 📖 🤔
Netanel Basal
📝 📖 🤔
Itay Oded
💻
Artur Androsovych
💻
Bérenger
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
Logo made by Freepik from www.flaticon.com