Jackie Jackie - 1 year ago 127
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 Source

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:


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>