I saw the following today in my code base and am trying to wrap my head around what it could be doing:

public ngOnInit(): void {
    this.siteTitle = this.modalService.site ? this.modalService.site.siteTitle : null;
        setTimeout(() => {
            if (!this.modalService.site) {
                this.ngZone.run(() => {
                    this.modalService.close();
                });
            }
        }, 0);
}

I've been reading some articles such as this one but still would like some clarification. I know that because the setTimeout parameter is 0 it will still be placed into the event queue and will execute once all other non-JS pieces are finished.

Thanks

I saw the following today in my code base and am trying to wrap my head around what it could be doing:

public ngOnInit(): void {
    this.siteTitle = this.modalService.site ? this.modalService.site.siteTitle : null;
        setTimeout(() => {
            if (!this.modalService.site) {
                this.ngZone.run(() => {
                    this.modalService.close();
                });
            }
        }, 0);
}

I've been reading some articles such as this one but still would like some clarification. I know that because the setTimeout parameter is 0 it will still be placed into the event queue and will execute once all other non-JS pieces are finished.

Thanks

• javascript
• angular

• What are you confused about if you know what setTimeout does? – escapesequence Commented Nov 17, 2017 at 15:20
• @escapesequence Why we'd need both the setTimeout and the ngZone.run() ? – User 5842 Commented Nov 17, 2017 at 15:21

2 Answers 2

I think the blog which you have pointed out is the most appropriate that you could get.

NgZone enables us to explicitly run certain code outside Angular’s Zone, preventing Angular to run any change detection. So basically, handlers will still be executed, but since they won’t run inside Angular’s Zone, Angular won’t get notified that a task is done and therefore no change detection will be performed. We only want to run change detection once we release the box we are dragging.

As you have already pointed out that you know why you are using setTimeout the confusion should be solves by reading these lines again once more.

The reason he is trying to use setTimeOut is because he wants to avoid getting the error

ExpressionChangedAfterItHasBeenCheckedError

which occurs when you try and change the value of the variable before Angular change detection pletes

credits - https://blog.angularindepth./everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

https://blog.thoughtram.io/angular/2017/02/21/using-zones-in-angular-for-better-performance.html

I don't have all the information to write a definitive answer but I use ngZone.run sometimes to force the refresh of the ponent.

Now using this in a setTimeout leads me to believe that something occurs elsewhere changing the state of the view but somehow requires a manual refresh to redraw the changes. This is usually a js-only library make changes that angular doesn't know about.