Repository files navigation

Follow me 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 asclick-to-edit oredit-in-place.It is based on ideas ofangular-xeditable which is developed in AngularJS.

Basically it does not depend on any libraries except Angular4 itself.For themes you may need to include Twitter Bootstrap CSS.

Angular 4 is now stable. Therefore, if encountering errors using thislib, ensure your version of Angular is compatible. The current version used to develop this lib is angular4^4.0.0.

• text
• textarea
• select
• checkbox
• radio
• date
• time
• datetime
• html5 inputs
  • pattern
  • number
  • range
• typeahead
• ui-select
• complex form
• editable row
• editable column
• editable table
• themes

1. A recommended way to installngx-inline-editor is throughnpm 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. IncludeTwitter Bootstrap andFontAwesome in your project.

ImportInlineEditorModule into your app's modules:

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.

You can find a complete examplehere

import{Component}from'@angular/core';@Component({selector:'my-component',template:`    <div>        <inline-editor type="text" [(ngModel)]="editableText" (onSave)="saveEditable($event)" name="editableText1" size="8"></inline-editor>    </div>    <div>        <inline-editor type="password" [(ngModel)]="editablePassword" (onSave)="saveEditable($event)"></inline-editor>    </div>    <div>        <inline-editor type="textarea" [(ngModel)]="editableTextArea" (onSave)="saveEditable($event)"> </inline-editor>    </div>    <div>        <inline-editor type="select" [(ngModel)]="editableSelect" (onSave)="saveEditable($event)" [options]="editableSelectOptions"        value="valor"></inline-editor>  </div>`})exportclassMyComponent{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 serviceconsole.log('http.service: '+value);}

<inline-editortype="text"[(ngModel)]="editableText"(onSave)="saveEditable($event)"name="editableText1"size="8"disabled="true"min="1"max="8"pattern="^[a-zA-Z]{1,3}"(onError)="myHandleError()"></inline-editor>

• type [string] Specifies the type<input> 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<input> element. Default isundefined.
• size [number] Defines the width, in characters, of an<input> element. Default is8.
• disabled [boolean] If set totrue, a disabled input element is unusable and un-clickable. Default isfalse.
• min [number] the min attribute specifies the minimum value for an<input> element. Default is1.
• max [number] the max attribute specifies the maximum value for an<input> element. Default isInfinity.

<inline-editortype="password"[(ngModel)]="editablePassword"(onSave)="saveEditable($event)"name="editablePassword"size="8"disabled="true"min="1"max="8"(onError)="myHandleError"></inline-editor>

• type [string] Specifies the type<input> 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<input> element. Default isundefined.
• size [number] Defines the width, in characters, of an<input> element. Default is8.
• disabled [boolean] If set totrue, a disabled input element is unusable and un-clickable. Default isfalse.
• min [number] the min attribute specifies the minimum value for an<input> element. Default is1.
• max [number] the max attribute specifies the maximum value for an<input> element. Default isInfinity.

<inline-editortype="textarea"[(ngModel)]="editableTextArea"(onSave)="saveEditable($event)"name="editableTextArea"size="8"disabled="true"cols="50"rows="4"min="1"max="8"(onError)="myHandleError"></inline-editor>

• type [string] Specifies the type<input> 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<input> element. Default isundefined.
• size [number] Defines the width, in characters, of an<input> element. Default is8.
• disabled [boolean] If set totrue, a disabled input element is unusable and un-clickable. Default isfalse.
• cols [number] Specifies the visible width of a text area. Default is50.
• rows [number] Specifies the visible height of a text area. Default is4.
• min [number] the min attribute specifies the minimum value for an<input> element. Default is1.
• max [number] the max attribute specifies the maximum value for an<input> element. Default isInfinity.

<inline-editortype="select"[(ngModel)]="editableSelect"(onSave)="saveEditable($event)"name="editableSelect"disabled="false"[options]="editableSelectOptions"></inline-editor>

• type [string] Specifies the type<input> 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<input> element. Default isundefined.
• disabled [boolean] If set totrue, a disabled input element is unusable and un-clickable. Default isfalse.
• options [Array<optionItem> | Object:{ data: Array<optionItem, value:string, text: string }] Array of items from which to select. Should be an array of objects withvalue andtext properties.Is possible to configure key-value parameters using an object that specifies these fields and data.

Typescript code:

editableSelect=2;editableSelectOptions=[{value:1,text:'status1'},{value:2,text:'status2'},{value:3,text:'status3'},{value:4,text:'status4'}];saveEditable(value){//call to http serverconsole.log('http.server: '+value);}

• editableSelect [number] Specifies the default's value of the select.
• editableSelectOptions [Array<optionItem> | Object: { data: Array<optionItem, value:string, text: string }] Specifies the array of items from which to select. Should be an array of objects withvalue andtext properties.Is possible to configure key-value parameters using an object that specifies these fields and data.

Typescript code:

editableSelect=2;editableSelectOptionsConfiguration={data:[{id:1,field:'status1'},{id:2,field:'status2'},{id:3,field:'status3'},{id:4,field:'status4'}],value:'id',text:'field'}saveEditable(value){//call to http serverconsole.log('http.server: '+value);}

Is possible to configure sublevels/children to generate the select using an array of objects calledchildren.

Typescript code:

editableSelectOptionsTwoLevelsDefault=1;editableSelectOptionsTwoLevelsConfiguration={data:[{id:1,field:'status1',children:[{id:5,field:'status1.1'},{id:6,field:'status1.2'}]},{id:2,field:'status2'},{id:3,field:'status3'},{id:4,field:'status4',children:[{id:7,field:'status4.1'}]}],value:'id',text:'field'}

<inline-editortype="text"ngModelempty="My custom message"(onSave)="saveEditable($event)"(onError)="handleError"name="editableText1"size="8"min="3"max="5"></inline-editor><inline-editortype="select"[(ngModel)]="editableSelectDoesntExist"(onSave)="saveEditable($event)"[options]="editableSelectOptionsConfiguration"></inline-editor>

• empty [string] Specifies the default message to display if there are not ngModel for the component.If the type isselect then the default selected element is the first element of theoptions array.

Theinline-editor has the following basic theme which you can find indist/themes/bootstrap.css:

a.c-inline-editor {text-decoration: none;color:#428bca;border-bottom: dashed1px#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.inlineEditForminput,.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;}

Example usingangular2-data-table (demo)

Please follow this guidelines when reporting bugs and feature requests:

1. UseGitHub Issues board to report bugs and feature requests (not our email address)
2. Pleasealways 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!

1. To generate all*.js,*.js.map and*.d.ts files:

   npm run build

2. To debug :

   npm run build:watch

Carlos Caballero - https://github.com/caballerog

Antonio Villena -https://github.com/xxxtonixxx

The MIT License (See theLICENSE file for the full text) -