Angular2 Template Reference Variables and dynamic updating

Question

I was originally trying to set up a template reference variable in Angular2 so I could reverse the sort order of a table without having to do the binding but I wasn't getting the dynamic updating of the interface when I was clicking the checkbox. I created a simple plunker in case I had something else in my app that might have been messing with the code and I don't see the interpolated value of the reference being updated on the fly. I made it a textbox to see if the value would change as I typed. It doesn't appear to be updating.

Am I missing something in my setup to make this work? Or am I trying to use the reference variables in a way they weren't created to be used for?

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

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2> 
       <input #myInput type="text" value="yeh" /> The INPUT value is "{{myInput.value}}"
    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }
}

dfsq · Accepted Answer · 2016-07-12 18:18:29Z

5

With <input #myInput type="text" value="yeh" /> you create a local template reference to DOM element, however it doesn't mean Angular watches it's value or any other arbitrary property, like checked, etc.

If you need to watch value you should better use ngModel or ngControl (see another answer (which is deleted now: <input [(ngModel)]="myInput" type="text" value="yeh" />)).

Another solution is to trigger "watching" by subscribing to some of the input events, e.g. keyup or input.

<input #myInput type="text" (input)="false" value="yeh" /> {{ myInput.value }}

and use some "event handler" or fake one, like false. As you can see this is really weird, avoid it.

Demo: http://plnkr.co/edit/JIwPDPyYFnkDtz99sew3?p=info

answered Jul 12, 2016 at 18:18

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

wiredprogrammer Over a year ago

I figured this might be the case but wasn't 100% sure of exactly how the reference was supposed to work here. Thanks for the clarification.

Sanket · Accepted Answer · 2016-07-12 18:22:53Z

0

Try this-

<input #myInput type="text" value="yeh" (keyup)="myInput.value" /> The INPUT value is "{{myInput.value}}"

See if this helps.

edited Jul 12, 2016 at 18:22

answered Jul 12, 2016 at 18:11

Sanket

20.2k10 gold badges74 silver badges84 bronze badges

Collectives™ on Stack Overflow

Angular2 Template Reference Variables and dynamic updating

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related