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?
+3
source to share
2 answers
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.
+1
source to share