Angular 2 Click-To-Edit

##Click on a data-binding to make it an input field, and save the changes!

Examples:

Plunker Example - http://plnkr.co/edit/4dGYAe?p=info

Newly Added!

Easy permission enabling/disabling edit functionality.
Easy to attach Field-Validation.

This Version Has:

Easy to implement component to wrap your bindings.
onSave event that calls your own save method.
Nice looking css style(inspired by Jira)
Canceling method when choosing to cancel or when clicking outside.

Installation

    npm install angular2-click-to-edit

How To Use:

Adding package to SystemJS:

systemjs.config.js

 var map = {
	'angular2-click-to-edit': 'node_modules/angular2-click-to-edit',
	}

 var packages = {
	'angular2-click-to-edit': { main: 'index' }  
 }

Step 1:

component.ts

 // Import to the component where you want to implement the click-to-edit.
 import { NDV_DIRECTIVES } from 'angular2-click-to-edit/components';

 // Include it in the Component directives
 @Component({
 	 directives: [NDV_DIRECTIVES]
 })

Step 2:

page.html

<!- This is your uneditible regular binding: ->
<p>{{user.firstName}}</p>

<!- This is your EDITABLE binding: ->
<p><ndv-edit [title]="'firstName'" [placeholder]='user.firstName' (onSave)='yourSaveMethod($event)'></ndv-edit></p>

Important Notes!

As you can see there are few parameters passed:

[title] - this is the name of the field you want to send back to the server. i.e: "email".
[placeholder] - this is the text that will be displayed by default(before editing) so we would probably like to bind our data to it.
[min] - this one is similar to minlength(for validation) and can set the minimum requirement of chars.
[max] - this one is similar to maxlength(for validation) and can limit the number of chars.

-[regex] - this one is similar to pattern(for validation) and can use regular expressions.

[permission] - a simple attribute, once equal to false the edit field is changed to read-only.
(onSave) - this one takes the function you give it and call it when the user saved his edited info!

VERY IMPORTANT TO NOTICE

$event - is the object containing the information based on the [title]!!!

for instance: [title]="firstName"* then $event = { firstName: 'the user edited text' }.

Thanks

for this awesome tutorial by Ben Nadel - http://www.bennadel.com/blog/3009-tracking-click-events-outside-the-current-component-in-angular-2-beta-1.html

nadavshemesh / angular2-click-to-edit