Demystifying the ApplicationRef.IsStable event in Angular

Photo by Thomas Rey on Unsplash

It would be fair to say, that the “ApplicationRef.IsStable” is the most misunderstood event in the Angular world. Too few know the exact definition of it.

The official documentation is the one, to blame for that.

isStable Returns an Observable that indicates when the application is stable or unstable.

It raises so many questions. What does an unstable state mean? What does a stable state mean? Does it fire only once or multiple times? How to use it?.

After digging into Angular source code and reading some advanced topics, finally, I can merge my experience and share it with you.

I’ll start with the definition of Unstable and stable states.

Unstable State

We can say, that an Angular application is in an unstable state, whenever there are pending tasks left.

A pending task is an asynchronous callback, that has to be executed when the time comes. it can be created from one of these sources:

• setTimeout / setInterval
• AJAX
• user events (click, drag, touch, etc.)
• Promise

So for example, if we have:

setTimeout(()=>{…