Angular 4 (4.1.1) Quick Editor
Quick Editor is Bootstrap 3 based Angular 4 Quick Editor. This Editor suits your need if you need a simple UI editor quickly. The editor provides Metadata way of configuration, which saves energy of writing lots UI code. The project has been updated to use typescript declaration files in node_modules/@type, if there is any pre installed global typings files, please uninstall.
Currently, the editor supports 4 types of input,
- Input
- TextArea
- Google Map
- Tags (integrated from http://sliptree.github.io/bootstrap-tokenfield/)
More types of inputs will be added soon.
Feature
- onSave onDelete event binder
- UI Read-Only Mode
- Dirty field indicator
- Data reset after cancel edit
- Save Cancel Edit and Delete buttons with icon are provided
- Google Map Edit with draggble marker and geocode search
How To Use
Setup the quick-editor through NPM
npm install quick-editor --save
Before using the script, please add following library into .angular-cli.json
"styles": [
"../node_modules/jquery-ui-dist/jquery-ui.min.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.min.css",
"../node_modules/bootstrap-tokenfield/dist/css/tokenfield-typeahead.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/jquery-ui-dist/jquery-ui.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/bootstrap-tokenfield/dist/bootstrap-tokenfield.min.js"
],
Import the Quick Editor Classes when required
; @
The field name in EditorMetadata should be same as property name in data model. Location attribute should be a tuple type with 2 number element, represents latitude and longitude. Tags attribute should be an array.
@ implements OnInit places:Place; metadataArray:EditorMetadata = <EditorMetadata> label: 'Name' field: 'name' placeholder: 'Please input place name' type: EditorMetadataTypeTextInput label: 'Description' field: 'desc' placeholder: 'Please input some description' type: EditorMetadataTypeTextArea label: 'Address' field: 'address' placeholder: 'Please input place name' type: EditorMetadataTypeTextInput label: 'Map' field: 'latlng' placeholder: '' type: EditorMetadataTypeGoogleMap label: 'Tags' field: 'tags' placeholder: 'Tags to describe the place' type: EditorMetadataTypeTagsInput ;...