Angular template variable reference

Question

Here is a weird problem in Angular:

<input #pin1 type="password">
<p>You entered: {{pin1.value}}</p>

If you type something in <input>, the <p>'s content will not change which means pin1.value does not have value, does it mean the variable reference #pin1 does not work?

On the other hand, if we add a function to pass the reference, it will work.

<input #pin2 type="password" (input)="test(pin2)">
<p>You entered: {{pin2.value}}</p>

where test=function(x){console.log(x);}

For this <input>, if we type something, the the <p>'s content will change to corresponding text which implies #pin2 works.

So, the question is, in Angular, why we must use function to pass variable reference firstly then we can use it, why we cannot directly use variable reference.

actually, the added function "test" can be any function, only requirement is we pass variable reference into function.So I do not understand why we must do it? Why can't we just declare a variable reference, and then directly use it in template expression or interpolation. — Meow
– Meow, Commented Dec 19, 2017 at 1:17
After several test, I found we even do not need pass variable reference into function, for example: <input #pin2 type="password" (input)="test()"> where test = function(){}, and it still works. However, if we delete the event binding, just <input #pin2 type="password">, the variable reference will not work. This problem becomes more weird, can anyone explain it?? — Meow
– Meow, Commented Dec 19, 2017 at 1:50
The reason is simple: events handled from output event bindings trigger change detection. — Michael Kang
– Michael Kang, Commented Dec 19, 2017 at 2:00
thank you for reply, but what's the relationship with template variable reference, why we must trigger event first? — Meow
– Meow, Commented Dec 19, 2017 at 2:19

Mehdi · Accepted Answer · 2017-12-19 04:13:16Z

1

Firstly, that is not how binding works. What you did is creating a reference to input Dom object. At the time of the creation, the value of that Dom element (input) was empty. hence no value showing in your <p> tag. if you want to see the value as you type then you are looking for a 2 way binding like so

<input [(ngModel)]="pin" type="password">
<p>You entered: {{pin}}</p>

Assuming that pin is declared in your ts file.

As to why the value was updating when you introduces a function, the answer is because Angular will be calling that function test(pin2) whenever you type something into that input which results in running a detect change on the model.

Long story short, Angular is a Model driven framework, if you need a value, you shouldn't need to get the DOM element to get the value from there.

answered Dec 19, 2017 at 4:13

Mehdi

2,4081 gold badge19 silver badges28 bronze badges

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

Comments

Meow · Accepted Answer · 2017-12-19 01:58:53Z

0

I may get an ambiguous answer, it may be related to event binding, which means "view-to-source", if we didn't bind any event, the view (user interaction) cannot pass data to source (the component class), so variable reference may not work, but there are still some question like the template references should not be related to source side, since such variables aren't member/properties of component class.

answered Dec 19, 2017 at 1:58

Meow

3784 silver badges13 bronze badges

Comments

farham heidari · Accepted Answer · 2020-04-26 06:55:24Z

0

it is so werired behaviour in angular this code not working

<input #inputval type="text"  />
<app-newcomp [testValue]="inputva.value"></app-newcomp>

but if you add "input" event to the input element then it will work

<input #inputval type="text" (input)="someFunctionInTs($event)"  />
<app-newcomp [testValue]="inputva.value"></app-newcomp>

answered Apr 26, 2020 at 6:55

farham heidari

1772 silver badges10 bronze badges

Collectives™ on Stack Overflow

Angular template variable reference

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related