When and why to use a 'tick' in Angular 2?

Question

I have seen the following is used in an Angular 2 component class:

setTimeout(()=>{}, 0); 

That means, an empty function is called after 0 seconds. I know this is related to Javascript event model, but do not understand it completely.

Please explain when and why this is done in Angular 2, using a small real world example with some code snippet.

Answer 1

setTimeout(()=>{}, 0); 

Causes Angular to run change detection for the whole application, like ApplicationRef.tick

zone.js patches async APIs (addEventHandler, setTimeout, ...) and runs change detection after a callback was completed.

Answer 2

I'll add on the answer of Gunter as it is small at the moment.

He says :

setTimeout(()=>{}, 0); Causes Angular to run change detection for the whole application

This is because the setTimeout method has been monkey patched to be intercepted by angular which upon interception triggers change detection. In other words everytime setTimeout is called a change detection happens.

this could be done like this:

const temp = window.setTimeout; window.setTimeout = (...args) => {     temp(...args)     angular.triggerChangeDetection(); // or w.e they use } 

So the 0 is to make the change detection happen immediately and the empty function is because we don't want to do anything.