Function called infinitely on property binding
I found a very strange problem in my Angular app.
Let's say I have a simple example.component.ts
@Component({
moduleId: module.id.toString(),
selector: 'example',
templateUrl: 'example.component.html',
styles: [``]
})
export class ExampleComponent{
get buttonShouldBeDisabled(){
console.log("property call");
return true;
}
}
with a template defined like this
<html>
<body>
<button type="button" [disabled]="buttonShouldBeDisabled">Button</button>
</body>
</html>
Now in the browser console I see that the "property call" line is logged indefinitely.
What can cause this behavior? Am I correct in understanding that this means my property is being called over and over and this could cause the browser not to respond to user actions?
Your general approach is ok, I would change it like that
export class ExampleComponent{
isValid: boolean;
buttonShouldBeDisabled(){
console.log("property call");
return this.isValid;}}
With your html element bound to isValid
<button [disabled]="!buttonShouldBeDisabled>Button</button>
Now you can just set boolean, for example by clicking another button to toggle 'disabled' Hope this helps, greetings from Berlin.
I noticed this thing in Angular too. This is not an issue related to Angular's way of detecting changes for each component.