62 | ```
63 | # Important Notes!
64 | As you can see there are few parameters passed:
65 | - [title] - this is the name of the field you want to send back to the server. i.e: "email".
66 |
67 | - [placeholder] - this is the text that will be displayed by default(before editing)
68 | so we would probably like to bind our data to it.
69 |
70 | - [min] - this one is similar to minlength(for validation) and can set the minimum requirement of chars.
71 |
72 | - [max] - this one is similar to maxlength(for validation) and can limit the number of chars.
73 |
74 | -[regex] - this one is similar to pattern(for validation) and can use regular expressions.
75 |
76 | - [permission] - a simple attribute, once equal to false the edit field is changed to read-only.
77 |
78 | - (onSave) - this one takes the function you give it and
79 | call it when the user saved his edited info!
80 |
81 | # VERY IMPORTANT TO NOTICE
82 | $event - is the object containing the information based on the [title]!!!
83 | - for instance: [title]="firstName"*
84 | then $event = { firstName: 'the user edited text' }.
85 |
86 |
87 | ## Thanks
88 | - 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
89 |
--------------------------------------------------------------------------------
/components.d.js:
--------------------------------------------------------------------------------
1 | export * from './lib/ndv.edit.component';
2 | export * from './lib/ndv.edit.drop.component';
3 | export * from './lib/ndv.edit.date.component';
4 | export * from './lib/ndv.edit.time.component';
5 | export declare const NDV_DIRECTIVES;
--------------------------------------------------------------------------------
/components.d.ts:
--------------------------------------------------------------------------------
1 | export * from './lib/ndv.edit.component';
2 | export * from './lib/ndv.edit.date.component';
3 | export * from './lib/ndv.edit.time.component';
4 | export * from './lib/ndv.select.component';
--------------------------------------------------------------------------------
/components.js:
--------------------------------------------------------------------------------
1 | exports.NDV_DIRECTIVES = [
2 | require('./lib/ndv.edit.component').NdvEditComponent,
3 | require('./lib/ndv.edit.select.component').NdvEditSelectComponent,
4 | require('./lib/ndv.edit.time.component').NdvEditTimeComponent,
5 | require('./lib/ndv.edit.date.component').NdvEditDateComponent,
6 | require('./lib/ndv.edit.area.component').NdvEditAreaComponent,
7 | ];
--------------------------------------------------------------------------------
/examples/app/app.component.js:
--------------------------------------------------------------------------------
1 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5 | return c > 3 && r && Object.defineProperty(target, key, r), r;
6 | };
7 | var __metadata = (this && this.__metadata) || function (k, v) {
8 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9 | };
10 | var core_1 = require('@angular/core');
11 | var components_1 = require('angular2-click-to-edit/components');
12 | var AppComponent = (function () {
13 | function AppComponent() {
14 | this.firstName = 'Robert';
15 | this.lastName = 'Johnson';
16 | this.age = 23;
17 | }
18 | AppComponent.prototype.saveMethod = function (obj) {
19 | alert(' saved! the obj - ' + JSON.stringify(obj));
20 | };
21 | AppComponent = __decorate([
22 | core_1.Component({
23 | selector: 'my-app',
24 | styles: ["\n\n h3 {\n padding:6px;\n border-radius: 3px;\n }\n "],
25 | template: "\n\n