4

I am curious about how *ngif works:

<img *ngif="isMediaMessage(message) === 'audio'" src="assets/img/audio1" />

1) When I put a console inside the isMediaMessage function, the console prints out indefinitely; I wonder why it does that. Is it because of the digest loop? dirty checking? I am reading up more on these.

2) Should I use less data binding if I want to reduce rendering time?

3) Would you guys say this article is up to date?

This might be related.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Jun
  • 2,942
  • 5
  • 28
  • 50
  • 1
    Your link is related but it is for Angular 1 and `*ngIf` is an Angular 2+ thing. The function will run on every change detection cycle. – Pace Jun 14 '17 at 17:39
  • Read [this article](https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html) instead of the one in #3 – Pace Jun 14 '17 at 17:42
  • And in development mode it will run another cycle after that. – Igor Jun 14 '17 at 17:43
  • Just for the sake of understanding. If you are subscribing to say...`mousemove` anywhere and you don't do anything special then the change detection will run every time the mouse moves. – Pace Jun 14 '17 at 17:44
  • @Pace, Thanks for the article. but for *ngIf, why does it have to recheck even though the screen has not received any new action? I expected it to run only once during the first rendering. – Jun Jun 14 '17 at 17:55
  • What is your condition was `*ngIf="shouldBeShown()"` and the criteria to determine whether or not to show the data was if the data were loaded (an xhr request finished) or the user clicked an unhide button (DOM event). By default, angular assumes ever action might change the result of that ngIf statement. – Pace Jun 15 '17 at 19:29

1 Answers1

4

This is concerning to the digest loop/detection cycle and the watches on the page.

Every time there is a change in the page and the queue of dirty checking is running then the mechanism of detection is running will reevaluate the ngIf and your code/condition of ngIf will fire.

Tal Avissar
  • 10,088
  • 6
  • 45
  • 70