CODEWITHSUNDEEP
javascriptangularangular2-changedetection
Gustavo Costa
Gustavo Costa

Reputation: 129

Change Detection process and which exact time check OnPush properties

In https://hackernoon.com/everything-you-need-to-know-about-change-detection-in-angular-8006c51d206f

He say that angular has 14 operations but which exact moment it's checked if the component is ChecksEnabled == false (OnPush) and especially if it's OnPush at what time it checks some @Input properties has changed to run the process inside it? And continue with the check in the DOM and invoke the required life cycles ?

And if the value is a new reference, it will run the check only on the properties of that value of @Input or at all in the binding? Agree with me that it would be much more performatic if he just checks the value bindings of that element?

Upvotes: 1

Views: 330

Answers (1)

Max Koretskyi
Max Koretskyi

Reputation: 105439

At which exact moment it's checked if the component is ChecksEnabled == false (OnPush)

It's happening when Angular runs checks for child views:

  • runs change detection for a child view (repeats the steps in this list)

Here is the relevant code:

function callViewAction(view: ViewData, action: ViewAction) {
  const viewState = view.state;
  switch (action) {
    ...
    case ViewAction.CheckAndUpdate:
      if ((viewState & ViewState.Destroyed) === 0) {
        if ((viewState & ViewState.CatDetectChanges) === ViewState.CatDetectChanges) {
          checkAndUpdateView(view);
        } else if (viewState & ViewState.CheckProjectedViews) {
          execProjectedViewsAction(view, ViewAction.CheckAndUpdateProjectedViews);
        }
      }
      break;

At what time it checks some @Input properties has changed to run the process inside it

This is performed for this step:

  • updates input properties on a child component/directive instance

To learn more about it read The mechanics of property bindings update in Angular

And continue with the check in the DOM and invoke the required life cycles ?

This will be done on:

  • updates DOM interpolations and bindings for the current view if properties on current view component instance changed

To learn more read The mechanics of DOM updates in Angular

Upvotes: 3

Related Questions