4

My understanding of angular change detection strategy from various articles and stackoverflow posts:

The change detection process includes:

  1. Updating inputs to children of a component.
  2. Run change detection for embedded views.
  3. Call ngOnChanges, ngDoCheck, ngOnInit on children if applicable.
  4. Update content children in current component.
  5. Call afterContentInit, afterContentChecked of children if applicable.
  6. Update DOM interpolation of current component.
  7. Run change detection for child view.
  8. Call afterViewInit, afterViewChecked of children if applicable.

Default change detection strategy: When a event (dom events, setTimeout, XHR etc) happens at any component, angular would run change detection for the entire application starting from top. All the steps above are repeated for all the components.

OnPush change detection strategy: Change detection is not triggered for a component unless

  1. When the component is first created a change detection is run.
  2. A reference to a input of the component changes.
  3. A event listener (ex: (click)="onClick()") is triggered in the component or one of it's children
  4. When a async pipe gets a new value from the observable

Some other interesting things:

  1. All the steps in the change detection process listed above are run for OnPush change detection strategy too except DOM binding updates. Yes! ngDoCheck, afterViewChecked etc life cycle hooks are called even for components with OnPush change detection strategy when a event happens in any part of application.

  2. When a markForCheck is called, it would mark the present component and all the parents in the hierarchy to be checked for changes. This forces change detection for these components.

  3. When a event happens in the application angular starts checking from root of application and then down the hierarchy. When a component is encountered it is checked if the component is marked for check.

    If marked for check then change detection is run for the component. (DOM bindings are updated)

    Else the component is checked if it has OnPush change detection strategy.

    If OnPush strategy, the input bindings are checked for any reference changes. If references have changed the change detection happens. (DOM bindings updated).

    Else change detection is run for the component (DOM bindings are re evaluated).

My Doubts:

  1. Is my understanding correct?
  2. What is the difference between a embeddedView and childView in a view. is this about direct children vs projected content of a component?
  3. If in OnPush change detection strategy all steps except DOM Interpolation updates are done (i.e the complete application view hierarchy is traversed by angular and life cycle events called for every event) how does this still turn out to be more performant? Is DOM interpolation update a very costly task?
  4. If i want to use a component inside another component with change detection strategy as OnPush i will have make sure to trigger changes that happen internally inside the component for example with a xhr request. Doesn't this create a coupling between the component and where it is used?
saivishnu tammineni
  • 1,092
  • 7
  • 14
  • Basically, In short words, angular maintains its component tree hierarchy. So, any change in child component angular will traverse tree from child to its last parent and then updates value to that child component. So, If you use OnPush() change detection than, angular will traverse tree only for related tree hierarchy and not for all component tree. And By onPush change detection will trigger only after Reference of object will change, so you always need to pass new reference to component. – Developer May 21 '21 at 12:41
  • Did you come to a conclusion for this topic? I would like to hear your thoughts on this topic – Aakash Goplani Jul 26 '21 at 16:53
  • @saivishnu-tammineni please check https://indepth.dev/posts/1053/everything-you-need-to-know-about-change-detection-in-angular article – pathe.kiran Apr 29 '22 at 10:05

0 Answers0