Home

Awesome

Native UI Inline-editor Angular (version 4+) component (demo)

Follow me twitter 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 which is developed in AngularJS.

Version 0.1.0

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

Quick start

  1. A recommended way to install ngx-inline-editor is through npm package manager using the following command:

npm i @qontu/ngx-inline-editor --save

  1. Include the basic theme or configure your own styles which are in the following path:

dist/themes/bootstrap.css

  1. Include Twitter Bootstrap and FontAwesome in your project.

Usage

Angular (4+) and later

Import InlineEditorModule 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.

Simple Example

You can find a complete example here

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>`
})
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
 <inline-editor
        type="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>
Password
 <inline-editor
        type="password"
        [(ngModel)]="editablePassword"
        (onSave)="saveEditable($event)"
        name="editablePassword"
        size="8"
        disabled="true"
        min="1"
        max="8"
        (onError)="myHandleError"></inline-editor>
TextArea
 <inline-editor
        type="textarea"
        [(ngModel)]="editableTextArea"
        (onSave)="saveEditable($event)"
        name="editableTextArea"
        size="8"
        disabled="true"
        cols="50"
        rows="4"
        min="1"
        max="8"
        (onError)="myHandleError"></inline-editor>
Select
Basic example
<inline-editor
        type="select"
        [(ngModel)]="editableSelect"
        (onSave)="saveEditable($event)"
        name="editableSelect"
        disabled="false"
        [options]="editableSelectOptions"></inline-editor>

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 server
    console.log('http.server: ' + value);

  }
Parameter's configuration example

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 server
    console.log('http.server: ' + value);

  }
Children example

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

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'
  }

Version 0.1.0-optGroup

Empty components

  <inline-editor
  type="text"
  ngModel
  empty="My custom message"
  (onSave)="saveEditable($event)"
  (onError)="handleError"
  name="editableText1"
  size="8"
  min="3"
  max="5"></inline-editor>

  <inline-editor type="select"
                [(ngModel)]="editableSelectDoesntExist"
                (onSave)="saveEditable($event)"
                [options]="editableSelectOptionsConfiguration"></inline-editor>

Style/Theme

The inline-editor has the following basic theme which you can find in dist/themes/bootstrap.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 (demo) Version 0.1.0-angular2-data-table

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

  1. Use GitHub 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

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

License

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