angular-inline-editors | Simple and easy to use.
angular-inline-editors is a small Angular library that allows the experience to use editable elements (click-to-edit) without the pain and/or hassle.
- Follow me @ http://codechavez.com
- DEMO @ http://angularinlineeditorsdemo.azurewebsites.net
- source code demo @ https://github.com/codechavez/angular-inline-editor-demo
angular-inline-editors
Dependencies
angular-inline-editors was built to work with Angular 4+, current dependencies are Bootstrap (3.3.7+) and FontAwesome.
Road Map - Inline Editors
- input
- input - text
- input - password - pattern
- input - number
- input - email
- input - phone
- input - pattern
- textarea
- select
- checkbox
- checkbox list
- radio list
- tags
- date
- time
- datetime picker
- typeahead
- validations
- input - required
- textarea - required
- date - required
- time - required
- tags - required
- typeahead - required
- select - required
- checkbox list - required
- radio list - required
- editable data table
- customize css/themes
Date and Time uses ngx-bootstrap, please make sure to install it when using date and time controls.
Also, include this style reference into your index.html header
<link rel="stylesheet" href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">
NOTE: Working in a solution to remove this dependency.
DONATE!
IF YOU LIKE IT AND WANT TO SUPPORTGetting Started
-
install angular-inline-editors through npm package using the following command:
`npm install angular-inline-editors --save`
-
Dependencies to be included in your project:
- Bootstrap (3.3.7+) - Styling. We Recommend Bootstrap 4
- FontAwesome - Icons.
- ngx-bootstrap for date, time, and datetime editors.
Adding angular-inline-editors to your Module
Following the principle of Angular is based on Modules and you use what you want when you want to use it. You can add each angular-inline-editors separate. This means you add Modules based on what you need.
How to use
Add the module
;
Add more
;;
On your html
On your component
name:string;sampleClick
angular-inline-editors API
All angular-inline-editors have onSave and onCancel events with default behavior that your will read below. Also you can bind onSave and onCancel to trigger your saving data function or your cancel undo data.
NOTE: All examples below follow our DEMO code which link you'll find at the top of the place along with the source code.
(onSave)="YOUR_SAVE_FUNCTION"
(onCancel)="YOUR_CANCEL_FUNCTION"
input-editor
label - string - Label value for input element
id - string - Identifier for input element
[(ngModel)] - angular two ways binding
type="text" - Recommend type to use this control.
placeholder - string - Placeholder value for input element
disabled - string - true | false - by defult control is not disabled
stringlength - string - Set maximun string length for input element
(onSave) - Bound to the green button - accepts the changes made in the input element - (optional) triggers your save changes function.
(onCancel) - Bound to the red button - undo or cancel chnages mde in the input element - (optional) triggers your cancel/undo function.
Basic use
textarea-editor
label - string - Label value for input element
id - string - Identifier for input element
[(ngModel)] - angular two ways binding
placeholder - string - Placeholder value for input element
disabled - string - true | false - by defult control is not disabled
stringlength - string - Set maximun string length for input element
maxheight - string - Set max height of the textarea - auto | 100% | pixes | rem
(onSave) - Bound to the green button - accepts the changes made in the input element - (optional) triggers your save changes function.
(onCancel) - Bound to the red button - undo or cancel chnages mde in the input element - (optional) triggers your cancel/undo function.
Basic use
select-editor
label - string - Label value for input element
id - string - Identifier for input element
disabled - string - true | false - by defult control is not disabled
placeholder - string - Placeholder value for input element
[(ngModel)] - angular two ways binding for selected item
[options] - binding to a collection/array of objects
displayValue - string - Set the name of the property to be display;
dataValue - string - Set the name of the property to get the selected value;
(onSave) - Bound to the green button - accepts the changes made in the input element - (optional) triggers your save changes function.
(onCancel) - Bound to the red button - undo or cancel chnages mde in the input element - (optional) triggers your cancel/undo function.
Basic use
checkbox-editor
label - string - Label value for input element
id - string - Identifier for input element
disabled - string - true | false - by defult control is not disabled
[(ngModel)] - angular two ways binding
checkedDisplayValue - string - Text to display when checkbox is checked.
uncheckedDisplayValue - string - Text to display when checkbox is unchecked.
(onSave) - Bound to the green button - accepts the changes made in the input element - (optional) triggers your save changes function.
(onCancel) - Bound to the red button - undo or cancel chnages mde in the input element - (optional) triggers your cancel/undo function.
Basic use
checklist-editor
label - string - Label value for input element
id - string - Identifier for input element
disabled - string - true | false - by defult control is not disabled
placeholder - string - Placeholder value for input element
displayValue - string - Set the name of the property to be display;
dataValue - string - Set the name of the property to get the selected value;
[options] - binding to a collection/array of objects
[(ngModel)] - angular two ways binding for selected items. It will return a array of dataValue.
(onSave) - Bound to the green button - accepts the changes made in the input element - (optional) triggers your save changes function.
(onCancel) - Bound to the red button - undo or cancel chnages mde in the input element - (optional) triggers your cancel/undo function.
Basic Use
Returns an array of selected values.
[
'en',
'sp'
]
radiolist-editor
label - string - Label value for input element
id - string - Identifier for input element
disabled - string - true | false - by defult control is not disabled
placeholder - string - Placeholder value for input element
displayValue - string - Set the name of the property to be display;
dataValue - string - Set the name of the property to get the selected value;
[options] - binding to a collection/array of objects
[(ngModel)] - angular two ways binding for selected items. It will return the selected dataValue.
(onSave) - Bound to the green button - accepts the changes made in the input element - (optional) triggers your save changes function.
(onCancel) - Bound to the red button - undo or cancel chnages mde in the input element - (optional) triggers your cancel/undo function.
Basic Use
tags-editor
label - string - Label value for input element
id - string - Identifier for input element
disabled - string - true | false - by defult control is not disabled
placeholder - string - Placeholder value for input element
[(ngModel)] - angular two ways binding.
(onSave) - Bound to the green button - accepts the changes made in the input element - (optional) triggers your save changes function.
(onCancel) - Bound to the red button - undo or cancel chnages mde in the input element - (optional) triggers your cancel/undo function.
Basic Use
Return a array
[ 'test 1', 'test 2', test 3]
date-editor
ngx-bootstrap is required in order to use this editor. Make sure you've read the information in top of the page.
label - string - Label value for input element
id - string - Identifier for input element
disabled - string - true | false - by defult control is not disabled
placeholder - string - Placeholder value for input element
[(ngModel)] - angular two ways binding.
format - string - medium | short | fullDate | longDate | mediumDate | shortDate - follows angular standard -> https://v2.angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html
(onSave) - Bound to the green button - accepts the changes made in the input element - (optional) triggers your save changes function.
(onCancel) - Bound to the red button - undo or cancel chnages mde in the input element - (optional) triggers your cancel/undo function.
Basic Use
time-editor
ngx-bootstrap is required in order to use this editor. Make sure you've read the information in top of the page.
label - string - Label value for input element
id - string - Identifier for input element
disabled - string - true | false - by defult control is not disabled
placeholder - string - Placeholder value for input element
[(ngModel)] - angular two ways binding.
format - string - mediumTime | shortTime - follows angular standard -> https://v2.angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html
(onSave) - Bound to the green button - accepts the changes made in the input element - (optional) triggers your save changes function.
(onCancel) - Bound to the red button - undo or cancel chnages mde in the input element - (optional) triggers your cancel/undo function.
Basic Use
typeahead-editor
label - string - Label value for input element
id - string - Identifier for input element
disabled - string - true | false - by defult control is not disabled
placeholder - string - Placeholder value for input element
displayValue - string - Set the name of the property to be display;
dataValue - string - Set the name of the property to get the selected value;
[options] - binding to a collection/array of objects
[(ngModel)] - angular two ways binding for selected items.
(onSave) - Bound to the green button - accepts the changes made in the input element - (optional) triggers your save changes function.
(onCancel) - Bound to the red button - undo or cancel chnages mde in the input element - (optional) triggers your cancel/undo function.
Basic Use