Why Angular method binding firing continiously?

Question

@Component({
  selector: 'calc',
  template: '<p *ngIf="isCalculatable()"></p>'
})
export class CalcComponent {
   isCalculatable(){
       console.log("yes");
       return true;
   }
}

When I use this component <calc></calc>, it writes "yes" to console continiously. I mean isCalculatable() method firing. So I am using this method so many times in my applicaitons. May this stuation be performance issue?

It can be a performance issue, yes. Don't bind complex functions or ones with side effects in your template (if you need to bind to such a function, save the result to a variable and bind to that instead). — John Montgomery, Sep 25 '19 at 17:44

score 0 · Answer 1 · answered Sep 25 '19 at 17:41

Angular watches over every components and its changes continuously... It keeps checking for the changes of the ngIf condition at a certain interval... Thats why when it changes to false the element is removed from dom automatically and is added again when the condition again evaluates to true.

score 0 · Answer 2 · answered Sep 25 '19 at 17:45

0

This method runs for every change detection of the component.

answered Sep 25 '19 at 17:45

Uma

422
4
5

Why Angular method binding firing continiously?

2 Answers2