3

I have a simple page with an input element that has a DOM event (input). The HTML page also calls a function that just outputs something via console.log. Now when I open the page, it will show the log, but when I type something into the input field, it will also trigger the function EVERY time I type something.. (Actually, when I type a letter, it will console.logs TWICE every time)

Why does this happen? How to prevent it? I read some things about changeDetection, but is there another solution?

HTML:

{{test()}}

<input class="input-msg" [value]="textValue" (input)="textValue = $event.target.value;">

.ts:

export class TestComponent implements OnInit {

  constructor() { 
  }

  test() {
    console.log('test message');
  }
}

Expected Behavior:

The {{test()}} should not be called when typing something into the input field

JJJ
  • 32,902
  • 20
  • 89
  • 102
Melamsy
  • 53
  • 3
  • If you want to call test on component initialization, can't it be called from `ngOnInit()`? Also when you want to invoke `test()` – Plochie Jul 17 '19 at 06:00
  • @PareshLomate This was just an example to demonstrate the behavior. In my real project, i have a *ngFor which calls a function to load an image. When i type something into the input field, it loads the image on every letter input. – Melamsy Jul 17 '19 at 06:05
  • "it will also trigger the function EVERY time i type something" - Maybe you should use a debounceTime? Doc here: https://www.learnrxjs.io/operators/filtering/debouncetime.html – Hunor Jul 17 '19 at 06:12
  • you can call the test in ngoninit and store the result in a local attribute and simply display this attribute instead of a function or create a component to load an image with onpush changedetection. The input of it can be the url. – tano Jul 17 '19 at 06:15

1 Answers1

6

Since you're calling a function in one of the data-binding syntaxes, whenever Angular performs Change Detection, it will call this method.

Before for a function, anything that cases is the value that it returns. And for Angular to know that the returned value has changed, Angular will have to run it.

This is the exact same issue that people have raised a several questions here:

  1. Angular: Prevent DomSanizer from updating on DOM Events

  2. Angular performance: ngStyle recalculates on each click on random input

  3. Angular 7 ,Reactive Form slow response when has large data

You might want to read through these threads to understand what's going on here and how you can fix this issue.

The solution is to basically design your implementation in such a way, that it never calls a method in one of the data-binding syntaxes, i.e.

  1. In String Interpolation - {{ methodCall() }}
  2. In Property Binding - [propertyName]="methodCall()"
  3. In Attribute Binding - [class.className]="methodCall()" / [style.style-name]="methodCall()"

An alternative solution is do move this code to a Child Component and configure the changeDetectionStrategy on that child component to ChangeDetectionStrategy.OnPush

SiddAjmera
  • 38,129
  • 5
  • 72
  • 110