Jackie Jackie - 6 months ago 47
AngularJS Question

How to do a simple text input bind in Angular 2

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

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>
Comments