Change detection API Underlying architecture in Angular

Question

I was going through this article and was confused about how the change detection action works. https://vsavkin.com/change-detection-in-angular-2-4f216b855d4c

The concept:

Angular says it does not do dirty checking and there is no two binding as well as watching like in AngularJS 1.X. However, what I understand from Docs and few blogs + stacks is that there is a change detector attached to every component.

However, from this stack overflow with @Gunter's response here: Understanding change detection in angular 2

With ChangeDetectionStrategy.OnPush Angular runs change detection, when in @Input() was updated, a DOM event Angular listens to was received, or the async pipe (| async) received a new value.

I understand that it has an listener which listens for every change from angular. Second if I use runOutsideAngular does it not create change detector object on that component or action?

Other cases are if you explicitly (this.zone.runOutsideAngular()) or for some other reasons code runs outside Angulars zone modifies the status of the component, this also won't be covered (even when the code is an event handler).

Small sub-questions of the change detector lifecycle:

Question 1: Is it that there is an observer or is it an event listener?

Question 2: Does it mean that there is an active change detector object for every component whether we use changeDetectorStartegy.onPush or .Default?

Question 3: What is the impact of these change detector objects in each component implementation if I have 1000 component objects within Angular application? Especially for the memory profile of the application

Question 4: How do I manage it so that it does not impact the memory profile of the application in the browser

Question 5: Is there a place/resource where I can get the lifecycle of the change detector and ngZone associated?

Update: Request someone that rather than marking this question for close I would recommend answering a serious question. I appreciate your help understanding underlying working concepts.

Sapro

Answer 1

It's a quite broad question - these two articles should give you a good understanding:

• Angular’s $digest is reborn in the newer version of Angular
• Everything you need to know about change detection in Angular

Question 1: Is it that there is an observer or is it an event listener?

Question 2: Does it mean that there is an active change detector object for every component whether we use changeDetectorStartegy.onPush or .Defau

No, change detector is not a listener. Each component in Angular is represented as a view. Hence the application is a tree of views. When you inject ChangeDetectorRef in your component you're essentially injecting a wrapper around this view. Each view has a state which tells whether bindings on this view should be checked. OnPush simply sets this state to disabled so no checks are performed for the view/component. If the bindings change, then Angular sets the state to CheckOnce so that a view is checked only once until the next time the bindings change.

Question 3: What is the impact of these change detector objects in each component implementation if I have 1000 component objects within Angular application? Especially for the memory profile of the application

Question 4: How do I manage it so that it does not impact the memory profile of the application in the browser

As I explained above, there is no such thing as a separate change detector. It's a wrapper around a view. Views exist anyways since it is how Angular represents components tree under the hood.

Is there a place/resource where I can get the lifecycle of the change detector and ngZone associated?

There is no such thing as a lifecycle for change detector.

Sophiasophie

Thank you very much for your time. Thank you for the nice article. I see the point of changedetectorref. What is reattach/detach doing exactly to the object. If its not an event listener or an object change observer then - How is the "change" in a component detected to trigger a change detection across the angular? What is being attached and what is being detached? This article says otherwise mentioning an attachment of changedetector for every component. vsavkin.com/change-detection-in-angular-2-4f216b855d4c – Sapro

>> What is reattach/detach doing exactly to the object. - it changes the view state. I think you should probably read the entire article. >> What is being attached and what is being detached - in literal nothing nothing, it just changes view state which can be viewed as attaching or reattaching a view to the change detector's tree – Sophiasophie

Ok yes, I missed the point there. Thank you for a great article. I got the point that view.detectChanges() triggers the changedetection. This function seems to be within tick(). logic responsible for running change detection for a view resides in checkAndUpdateView How is it that the change basically capturing the state change? Using listeners? is the trigger of change happening with listeners - line 536? listeners.forEach((listener) => listener(componentRef)); github.com/angular/angular/blob/…. – Sapro

>> How is it that the change basically capturing the state change? Using listeners? - no, it's dirty checking mechanism. Read my another article :). It basically remembers the previous values and compares them with the current value during the check – Sophiasophie

Awesome. I believe this is the first time someone explained change detection so simply in these two articles. I always used to think changedetection is due to event listener/observable like function and not dirty checking. I had checked the tick source the first time around. Dont you think it would have been better if it was a single immutable dictator event listener rather than dirty checking? Whats your thought on it? There are so many conflicting articles there in the internet about change detection that its literally impossible to understand the actual concept. – Sapro

thanks, it's taken quite a while to understand it myself. follow me on medium for more articles. Dont you think it would have been better if it was a single immutable dictator event listener rather than dirty checking - that's an alternative approach used by vue.js and knockout.js frameworks. It has it's own drawbacks. But that's a separate question :) – Sophiasophie

Ok this is the one. Seems like change is detected using event. The short version is, that somewhere in Angular’s source code, there’s this thing called ApplicationRef, which listens to NgZones onTurnDone event. Whenever this event is fired, it executes a tick() function which essentially performs change detection. blog.thoughtram.io/angular/2016/02/22/… Which is right dirty checking or triggering event. More many say every component has change detector object. blog.angular-university.io/… – Sapro

this event is only used to trigger change detection, it is irrelevent in the mechanism of change detection itself. every component is a view, and change detector is just a wrapper around that view. there is no separate change detector – Sophiasophie

ok. I was trying to understand the docs and see that there are a lot of things unclear. Thank you for your time. The documentation surely seems to be the reason for adoption now adays. I wish it was a little better. – Sapro

sure, I see you have unaccepted the answer. Is there anything else unclear? – Sophiasophie

Yes. I apologize for that frantic change. I saw thoughtram article which refers to onTurnDone event triggering the change detection and not a mention of dirty check later (atleast no mention of it). Which is a little conflicting article. I have raised the issue with the angular team for appropriate document. I definitely feel changeDetection internals is something that needed clear documentation. github.com/angular/angular/issues/17169 Angular 4 resolves major issues of Angular 1 but seems like documentation has suffered in the newer versions. – Sapro

well, my article is based on sources, which is the single source of truth :) there can be no documentation for internals as it is the subject to change. for example, they completely rewritten change detection internals between angular v2 and v4 – Sophiasophie

and as far as I know ‛onTurnDown‛ event is no longer used, it has been changed as well, currently angular subscribes to ngzone.onMicrotaskEmpty event – Sophiasophie