question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Problem with property binding reevaluation with a template reference variable

See original GitHub issue

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Expected behavior

In a template I include the following HTML code:

<input type =“text” #query><input type =“submit” [disabled]=“!query.value”>

I expect the the submit button is disabled by default, but when I type something into the input box, it gets enabled since the property binding will be reevaluated in every event cycle. But that is not what is happening. The button stays disabled.

If I change the above code to the following,

<input type =“text” (input)=“0” #query><input type =“submit” [disabled]=“!query.value”>

and add an explicit event binding (which has nothing to do with the template variable itself), it behaves as intended. I think there is an overaggressive optimization is going on, which is not in compliance with what is stated in this page: https://angular.io/guide/architecture

“Angular processes all data bindings once per JavaScript event cycle, from the root of the application component tree through all child components.”

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Angular version: 1.6.7


Browser:
- [X] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [X] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 9.3.0  
- Platform: Mac 

Others:

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
trotylcommented, Feb 10, 2018

Duplicate of #6618 (woking as intended for bug report, not implementable for feature request), possibly could improve the docs.

1reaction
Toxicablecommented, Feb 9, 2018

Seeing a Stack blitz reproduction would be great https://stackblitz.com/fork/angular-gitter

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular change detection on Template Reference Variables ...
I expected the following code to work but the button stays disabled even after some value is entered in the input. Why does...
Read more >
Understanding Data Binding in Angular | by Chidume Nnamdi
This binding is one-way in the sense that, the Model's property can only be updated from the Model side and the View is...
Read more >
Data Binding in a Template - Salesforce Lightning Component ...
Bind properties in a component's template to properties in the component's JavaScript class. In the template, surround the property with curly braces, { ......
Read more >
Template Reference Variable | Data Binding | Angular 12+
In this lecture you are going to learn about template reference variable, also called as local reference variable and what is its use....
Read more >
QML Performance Considerations And Suggestions | Qt 6.4
A property binding expression will be re-evaluated if any of the properties ... The following example writes to elements of a reference sequence...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found