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?

Looks like textarea doesn't support the #binding notation. Maybe not implemented yet, you'll need to create you own directive to watch for events and update the model — floribon
– floribon, Commented Apr 23, 2015 at 18:23
changed it to input plnkr.co/edit/dtbDwneFFIiTazjiF7Li?p=preview still no luck — Jackie
– Jackie, Commented Apr 23, 2015 at 18:36

floribon · Accepted Answer · 2015-04-23 18:47:10Z

9

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>

answered Apr 23, 2015 at 18:47

floribon

19.2k5 gold badges56 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Are Butuv Over a year ago

crazy syntax =) in comparison to aurelia's <textarea class="left-side" value.bind="leftText"></textarea>

Mathias Lykkegaard Lorenzen Over a year ago

@arebutuv that syntax is not equivalent to the code given. He wants to execute a function on key up.

Günter Zöchbauer Over a year ago

Templates are now camelCase (since late beta) and #newLeft should work fine.

Tobias Gassmann · Accepted Answer · 2016-06-01 09:29:28Z

0

When using "#new-left" I get an Exception

EXCEPTION: Error: Uncaught (in promise): Template parse errors: "-" is not allowed in variable names

The solution with camelCased variable names works fine now for me.

answered Jun 1, 2016 at 9:29

Tobias Gassmann

11.9k18 gold badges62 silver badges97 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related