Fix subtle quirks with one-way binding about ng-forward HOT 6 CLOSED

Here is an Angular 2 app which demonstrates this:

import {bootstrap} from 'angular2/bootstrap';
import {Component, View, EventEmitter} from 'angular2/core';

@Component({ selector: 'user', inputs: ['user'], outputs: ['userChanged'] })
@View({ template: '<input [value]="user" (keyup)="updateUser($event)"> {{user}}' })
class User {
  user: String;
  userChanged: EventEmitter;

  constructor() {
    this.userChanged = new EventEmitter();
  }

  updateUser(event : any) {
    this.user = event.srcElement.value;
    //this.userChanged.next(event.srcElement.value);
  }
}

@Component({
  selector: 'hello-app',
  template: `
    <div class="greeting">{{greeting}} world!</div>
    <button class="changeButton" (click)="changeGreeting()">change greeting</button>
    <user [user]="greeting" (user-changed)="greeting = $event"></user>
  `,
  directives: [User]
})
export class HelloCmp {
  greeting: string;

  constructor() {
    this.greeting = 'Hello';
  }

  changeGreeting(): void { this.greeting = 'howdy'; }
}


export function main() {
  bootstrap(HelloCmp);
}

When you type in the user input box the inner value changes but not the outer one because the key up handler is updating the value of user in the template context.
If you then click the change greeting button then both the the outer and inner values are updated.
If you swap the commenting in the updateUser method then changes inside get propagated out (and back in again).

from ng-forward.

Thanks I'll check this out this week after I finish the testing utils stuff.

from ng-forward.

I looked at this a bit. I almost started to fix it but realized I wanted more tests around this stuff first so I could refactor without fear :). I'll add those tests and then play around with fixing this. We may have to change to a $watch approach (mentioned to my by Mike, via Pete). Though I'm not happy about creating X number of watchers per input. I've really liked how setters have replaced watchers in a lot of ways in my current a1atscript app. I'm not sure if you guys have stumbled onto it too, but you can do a lot of the same stuff in setters that you can do in watchers and I assume you get the performance boost of not having the extra watcher.

from ng-forward.

I would rather put our efforts into getting one-way binding into the core of Angular, although this would mean that ng-forward would only work with 1.5

from ng-forward.

Too late! I fixed it. It really kind of needed it. The way I was doing it was all weird, but I realized it could be so much simpler and still only use getters and setters.

from ng-forward.

Plus it fixed another bug I was having where you could not set a default value for inputs...

from ng-forward.