How to do a simple text input bind in Angular 2?

Question

I am trying to do a simple binding from an Angular2 component to the template. My template code looks like this...

<textarea class="left-side" #newLeft (keyup)="enterLeftText($event, newLeft)"></textarea>

<textarea class="right-side">{{leftText}}</textarea>

Then in my component I have the following...

enterLeftText($event, newLeft) {
  this.leftText = newLeft.value;
}

The problem is that newLeft is always undefined. What am I missing?

Answer 1

You found an interesting bug, as it seems we cannot have an uppercase in a #id binding.

Simply replacing newLeft with newleft will solve your problem:

http://plnkr.co/edit/ngqd0cUXyxsgBKOBSr9S?p=preview

---

UPDATE: in fact it appears that the id should be dash-noted and the variable is camel case, as it is the case on Angular 1 when binding attributes.

So the real answer to your problem is to write #new-left:

<textarea class="left-side" #new-left (keyup)="enterLeftText($event, newLeft)"></textarea>