Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qontu/ngx-inline-editor
Native UI Inline-editor Angular (4.0+) component
https://github.com/qontu/ngx-inline-editor
angular angular2 angular4 editor inline-editing ng2-inline-editor ngx-inline-editor
Last synced: 7 days ago
JSON representation
Native UI Inline-editor Angular (4.0+) component
- Host: GitHub
- URL: https://github.com/qontu/ngx-inline-editor
- Owner: qontu
- License: mit
- Created: 2016-08-11T13:57:26.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-09-18T04:26:37.000Z (over 4 years ago)
- Last Synced: 2025-01-07T04:13:56.241Z (12 days ago)
- Topics: angular, angular2, angular4, editor, inline-editing, ng2-inline-editor, ngx-inline-editor
- Language: TypeScript
- Homepage: https://qontu.github.io/ngx-inline-editor
- Size: 7.93 MB
- Stars: 164
- Watchers: 25
- Forks: 90
- Open Issues: 65
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-angular - ngx-inline-editor - Native UI Inline-editor Angular (4.0+) component. (Uncategorized / Uncategorized)
README
# Native UI Inline-editor Angular (version 4+) component ([demo](demos))
Follow me [](https://twitter.com/carlillo) to be notified about new releases.
ngx-inline-editor is a library of Angular (version 4+) that allows you to create editable elements.
Such technique is also known as *click-to-edit* or *edit-in-place*.
It is based on ideas of [angular-xeditable](https://github.com/vitalets/angular-xeditable) which is developed in AngularJS.
## Dependencies
Basically it does not depend on any libraries except Angular4 itself.
For themes you may need to include Twitter Bootstrap CSS.
### Angular 4+ Version
Angular 4 is now stable. Therefore, if encountering errors using this
lib, ensure your version of Angular is compatible. The current version used to develop this lib is angular4 **^4.0.0**.
## Controls & Features
* [x] text
* [x] textarea
* [x] select
* [ ] checkbox
* [ ] radio
* [ ] date
* [ ] time
* [x] datetime
* [ ] html5 inputs
* [x] pattern
* [x] number
* [x] range
* [ ] typeahead
* [ ] ui-select
* [ ] complex form
* [ ] editable row
* [ ] editable column
* [ ] editable table
* [x] themes
## Quick start
1. A recommended way to install ***ngx-inline-editor*** is through [npm](https://www.npmjs.com/search?q=ngx-inline-editor) package manager using the following command:
`npm i @qontu/ngx-inline-editor --save`
2. Include the basic theme or configure your own styles which are in the following path:
`dist/themes/bootstrap.css`
3. Include [Twitter Bootstrap](http://v4-alpha.getbootstrap.com/) and [FontAwesome](http://fontawesome.io/) in your project.
Usage
-----
## Angular (4+) and later
Import `InlineEditorModule` into your app's modules:
``` typescript
import {InlineEditorModule} from '@qontu/ngx-inline-editor';
@NgModule({
imports: [
InlineEditorModule
]
})
```
This makes all the `@qontu/ngx-inline-editor` components available for use in your app components.
## Simple Example
You can find a complete example [here](demos/basic)
```TypeScript
import {Component} from '@angular/core';
@Component({
selector: 'my-component',
template: `
`
})
export class MyComponent {
title = 'My component!';
editableText = 'myText';
editablePassword = 'myPassword';
editableTextArea = 'Text in text area';
editableSelect = 2;
editableSelectOptions =[
{value: 1, text: 'status1'},
{value: 2, text: 'status2'},
{value: 3, text: 'status3'},
{value: 4, text: 'status4'}
];
saveEditable(value) {
//call to http service
console.log('http.service: ' + value);
}
```
## API
### InlineEditorDirectives
##### Text
```HTML
```
* **`type`** [`string`] Specifies the type `` element to display.
* **`onSave`** [`event handler`] The expression specified will be invoked whenever the form is save via a click on save button.
The `$event` argument will be the value return of the input send.
* **`onError`** [`event handler`] The expression specified will be invoked whenever the form is save via a click on save button and an error is provoked (example: the value is not between min and max).
* **`name`** [`string`] Defines the name of an `` element. Default is `undefined`.
* **`size`** [`number`] Defines the width, in characters, of an `` element. Default is `8`.
* **`disabled`** [`boolean`] If set to `true`, a disabled input element is unusable and un-clickable. Default is `false`.
* **`min`** [`number`] the min attribute specifies the minimum value for an `` element. Default is `1`.
* **`max`** [`number`] the max attribute specifies the maximum value for an `` element. Default is `Infinity`.
##### Password
```HTML
```
* **`type`** [`string`] Specifies the type `` element to display.
* **`onSave`** [`event handler`] The expression specified will be invoked whenever the form is save via a click on save button.
The `$event` argument will be the value return of the input send.
* **`onError`** [`event handler`] The expression specified will be invoked whenever the form is save via a click on save button and an error is provoked (example: the value is not between min and max).
* **`name`** [`string`] Defines the name of an `` element. Default is `undefined`.
* **`size`** [`number`] Defines the width, in characters, of an `` element. Default is `8`.
* **`disabled`** [`boolean`] If set to `true`, a disabled input element is unusable and un-clickable. Default is `false`.
* **`min`** [`number`] the min attribute specifies the minimum value for an `` element. Default is `1`.
* **`max`** [`number`] the max attribute specifies the maximum value for an `` element. Default is `Infinity`.
##### TextArea
```HTML
```
* **`type`** [`string`] Specifies the type `` element to display.
* **`onSave`** [`event handler`] The expression specified will be invoked whenever the form is save via a click on save button.
The `$event` argument will be the value return of the input send.
* **`onError`** [`event handler`] The expression specified will be invoked whenever the form is save via a click on save button and an error is provoked (example: the value is not between min and max).
* **`name`** [`string`] Defines the name of an `` element. Default is `undefined`.
* **`size`** [`number`] Defines the width, in characters, of an `` element. Default is `8`.
* **`disabled`** [`boolean`] If set to `true`, a disabled input element is unusable and un-clickable. Default is `false`.
* **`cols`** [`number`] Specifies the visible width of a text area. Default is `50`.
* **`rows`** [`number`] Specifies the visible height of a text area. Default is `4`.
* **`min`** [`number`] the min attribute specifies the minimum value for an `` element. Default is `1`.
* **`max`** [`number`] the max attribute specifies the maximum value for an `` element. Default is `Infinity`.
##### Select
##### Basic example
```HTML
```
* **`type`** [`string`] Specifies the type `` element to display.
* **`onSave`** [`event handler`] The expression specified will be invoked whenever the form is save via a click on save button.
The `$event` argument will be the value return of the input send.
* **`name`** [`string`] Defines the name of an `` element. Default is `undefined`.
* **`disabled`** [`boolean`] If set to `true`, a disabled input element is unusable and un-clickable. Default is `false`.
* **`options`** [`Array | Object:{ data: Array | Object: { data: Array
```
* **`empty`** [`string`] Specifies the default message to display if there are not ngModel for the component.
If the type is `select` then the default selected element is the first element of the `options` array.
# Style/Theme
The `inline-editor` has the following basic theme which you can find in `dist/themes/bootstrap.css`:
```CSS
a.c-inline-editor {
text-decoration: none;
color: #428bca;
border-bottom: dashed 1px #428bca;
cursor: pointer;
line-height: 2;
margin-right: 5px;
margin-left: 5px;
}
.c-inline-editor.editable-empty,
.c-inline-editor.editable-empty:hover,
.c-inline-editor.editable-empty:focus,
.c-inline-editor.a.editable-empty,
.c-inline-editor.a.editable-empty:hover,
.c-inline-editor.a.editable-empty:focus {
font-style: italic;
color: #DD1144;
text-decoration: none;
}
.c-inline-editor.inlineEditForm {
display: inline-block;
white-space: nowrap;
margin: 0;
}
#inlineEditWrapper {
display: inline-block;
}
.c-inline-editor.inlineEditForm input,
.c-inline-editor.select {
width: auto;
display: inline;
}
.c-inline-editor.inline-editor-button-group {
display: inline-block;
}
.c-inline-editor.editInvalid {
color: #a94442;
margin-bottom: 0;
}
.c-inline-editor.error {
border-color: #a94442;
}
[hidden].c-inline-editor {
display: none;
}
```
# Integration with other ngx-libraries
## ngx-data-table
Example using [angular2-data-table](https://github.com/swimlane/angular2-data-table) ([demo](demos))
# Troubleshooting
Please follow this guidelines when reporting bugs and feature requests:
1. Use [GitHub Issues](https://github.com/qontu/ngx-inline-editor/issues) board to report bugs and feature requests (not our email address)
2. Please **always** write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.
Thanks for understanding!
# Development
1. To generate all `*.js`, `*.js.map` and `*.d.ts` files:
`npm run build`
2. To debug :
`npm run build:watch`
## Authors
Carlos Caballero - [https://github.com/caballerog](hhttps://github.com/caballerog)
Antonio Villena - [https://github.com/xxxtonixxx](https://github.com/xxxtonixxx)
## License
The MIT License (See the [LICENSE](https://github.com/qontu/ngx-inline-editor/blob/master/LICENSE.MD) file for the full text) -