feat(core): desugar [()] to [prop] and (prop-change)

BREAKING CHANGE

Before

```
<cmp [(prop)]="field"> was desugared to <cmp [prop]="field" (prop)="field=$event">
```

After
```
<cmp [(prop)]="field"> is desugared to <cmp [prop]="field" (prop-change)="field=$event">
```

Closes angular#4658

Author: vsavkin

modules/angular2/src/core/compiler/template_parser.ts

@@ -361,7 +361,8 @@ class TemplateParseVisitor implements HtmlAstVisitor {
 
   private _parseAssignmentEvent(name: string, expression: string, sourceInfo: string,
                                 targetMatchableAttrs: string[][], targetEvents: BoundEventAst[]) {
-    this._parseEvent(name, `${expression}=$event`, sourceInfo, targetMatchableAttrs, targetEvents);
+    this._parseEvent(`${name}-change`, `${expression}=$event`, sourceInfo, targetMatchableAttrs,
+                     targetEvents);
   }
 
   private _parseEvent(name: string, expression: string, sourceInfo: string,

modules/angular2/src/core/forms/directives/ng_control_name.ts

@@ -75,7 +75,7 @@ const controlNameBinding =
   selector: '[ng-control]',
   bindings: [controlNameBinding],
   inputs: ['name: ngControl', 'model: ngModel'],
-  outputs: ['update: ngModel'],
+  outputs: ['update: ngModelChange'],
   exportAs: 'form'
 })
 export class NgControlName extends NgControl implements OnChanges,

modules/angular2/src/core/forms/directives/ng_form_control.ts

@@ -66,7 +66,7 @@ const formControlBinding =
   selector: '[ng-form-control]',
   bindings: [formControlBinding],
   inputs: ['form: ngFormControl', 'model: ngModel'],
-  outputs: ['update: ngModel'],
+  outputs: ['update: ngModelChange'],
   exportAs: 'form'
 })
 export class NgFormControl extends NgControl implements OnChanges {

modules/angular2/src/core/forms/directives/ng_model.ts

@@ -37,7 +37,7 @@ const formControlBinding = CONST_EXPR(new Binding(NgControl, {toAlias: forwardRe
   selector: '[ng-model]:not([ng-control]):not([ng-form-control])',
   bindings: [formControlBinding],
   inputs: ['model: ngModel'],
-  outputs: ['update: ngModel'],
+  outputs: ['update: ngModelChange'],
   exportAs: 'form'
 })
 export class NgModel extends NgControl implements OnChanges {

modules/angular2/test/core/compiler/template_parser_spec.ts

@@ -282,7 +282,7 @@ export function main() {
                    ],
                    [
                      BoundEventAst,
-                     'prop',
+                     'propChange',
                      null,
                      'v = $event',
                      'TestComp > div:nth-child(0)[[(prop)]=v]'
@@ -305,7 +305,7 @@ export function main() {
                    ],
                    [
                      BoundEventAst,
-                     'prop',
+                     'propChange',
                      null,
                      'v = $event',
                      'TestComp > div:nth-child(0)[bindon-prop=v]'

modules/angular2/test/core/linker/integration_spec.ts

@@ -839,9 +839,9 @@ export function main() {
                  rootTC.debugElement.componentInstance.ctxProp = 'one';
                  rootTC.detectChanges();
 
-                 expect(dir.value).toEqual('one');
+                 expect(dir.control).toEqual('one');
 
-                 ObservableWrapper.subscribe(dir.control, (_) => {
+                 ObservableWrapper.subscribe(dir.controlChange, (_) => {
                    expect(rootTC.debugElement.componentInstance.ctxProp).toEqual('two');
                    async.done();
                  });
@@ -2072,15 +2072,13 @@ class ToolbarComponent {
   }
 }
 
-@Directive({selector: '[two-way]', inputs: ['value: control'], outputs: ['control']})
+@Directive({selector: '[two-way]', inputs: ['control'], outputs: ['controlChange']})
 @Injectable()
 class DirectiveWithTwoWayBinding {
-  control: EventEmitter;
-  value: any;
+  controlChange = new EventEmitter();
+  control = null;
 
-  constructor() { this.control = new EventEmitter(); }
-
-  triggerChange(value) { ObservableWrapper.callNext(this.control, value); }
+  triggerChange(value) { ObservableWrapper.callNext(this.controlChange, value); }
 }
 
 @Injectable()

modules/upgrade/src/ng1_facade.ts

@@ -63,14 +63,15 @@ export class ExportedNg1Component {
           localName = localName.substr(1) || name;
           var outputName = 'output_' + name;
           var outputNameRename = outputName + ': ' + name;
+          var outputNameRenameChange = outputName + ': ' + name + 'Change';
           var inputName = 'input_' + name;
           var inputNameRename = inputName + ': ' + name;
           switch (type) {
             case '=':
               this.propertyOutputs.push(outputName);
               this.checkProperties.push(localName);
               this.outputs.push(outputName);
-              this.outputsRename.push(outputNameRename);
+              this.outputsRename.push(outputNameRenameChange);
               this.propertyMap[outputName] = localName;
             // don't break; let it fall through to '@'
             case '@':

modules/upgrade/src/ng2_facade.ts

@@ -120,15 +120,23 @@ export class Ng2ComponentFacade {
       var output = outputs[j];
       var expr = null;
       var assignExpr = false;
+
+      var bindonAttr =
+          output.bindonAttr ? output.bindonAttr.substring(0, output.bindonAttr.length - 6) : null;
+      var bracketParenAttr =
+          output.bracketParenAttr ?
+              `[(${output.bracketParenAttr.substring(2, output.bracketParenAttr.length - 8)})]` :
+              null;
+
       if (attrs.hasOwnProperty(output.onAttr)) {
         expr = attrs[output.onAttr];
       } else if (attrs.hasOwnProperty(output.parenAttr)) {
         expr = attrs[output.parenAttr];
-      } else if (attrs.hasOwnProperty(output.bindonAttr)) {
-        expr = attrs[output.bindonAttr];
+      } else if (attrs.hasOwnProperty(bindonAttr)) {
+        expr = attrs[bindonAttr];
         assignExpr = true;
-      } else if (attrs.hasOwnProperty(output.bracketParenAttr)) {
-        expr = attrs[output.bracketParenAttr];
+      } else if (attrs.hasOwnProperty(bracketParenAttr)) {
+        expr = attrs[bracketParenAttr];
         assignExpr = true;
       }
 

modules/upgrade/test/integration_spec.ts

@@ -111,8 +111,12 @@ export function main() {
                Component({
                  selector: 'ng2',
                  inputs: ['literal', 'interpolate', 'oneWayA', 'oneWayB', 'twoWayA', 'twoWayB'],
-                 outputs:
-                     ['eventA', 'eventB', 'twoWayAEmitter: twoWayA', 'twoWayBEmitter: twoWayB']
+                 outputs: [
+                   'eventA',
+                   'eventB',
+                   'twoWayAEmitter: twoWayAChange',
+                   'twoWayBEmitter: twoWayBChange'
+                 ]
                })
                    .View({
                      template: