angularangular-changedetectionngzoneangular-ngzone

Why does Angular async pipe uses cdr.markForCheck() and not cdr.detectChanges()?


I have a general Angular question:

Why does Angular async pipe use cdr.markForCheck() instead of cdr.detectChanges()?

What I see there are two main differences in these two 'styles':

  1. markForCheck() marks the path to be checked up to the root component - what to update
  2. markForCheck() lets the change detection happen in current or next cycle - timing

My thoughts or questions:

  1. why do we need to check whole path to the root (in async pipe)? Why not just current component? (detectChanges()) - this relates to what to update

  2. why just mark only (for current/next cycle - in markForCheck() using ngZone)? Why not detect changes immedially? (detectChanges()) this relates to timing

  3. what if there is no ngZone async trigger / no async operation? Then the view update won't happen?

  4. what would happen if we changed async pipe to use detectChanges() instead?


async pipe:

  private _updateLatestValue(async: any, value: Object): void {
    if (async === this._obj) {
      this._latestValue = value;
      this._ref.markForCheck();
    }
  }

Edit:

Please do not explain what each of the methods does as I read it in docs many times and it is not comprehensible for me to understant from the async point of view. The important part for me to know is why in regards to what to update and timing.


Solution

  • For proper documentation check ChangeDetectorRef

    detectChanges

    Checks this view and its children

    If your class has changed but it the view has not been updated yet, you need to notify Angular to detect those changes.

    markForCheck

    When a view uses the OnPush (checkOnce) change detection strategy, explicitly marks the view as changed so that it can be checked again.

    From the text alone you can already see, that this strategy is used for cases, where the components detection strategy has been changed to onPush (e.g. if an @Input() has changed).

    Update

    To answer your questions directly:

    1. why do we need to check whole path to the root (in async pipe)? Why not just current component? (detectChanges()) - this relates to what to update

    Its not checking the root, but rather the ancestors of your component enter image description here

    1. why just mark only (for current/next cycle - in markForCheck() using ngZone)? Why not detect changes immedially? (detectChanges()) this relates to timing

    I would assume that this is a performance related topic. Gather all the checks which needs to be run and perform them in the next cycle.

    1. what if there is no ngZone async trigger / no async operation? Then the view update won't happen?

    Correct, if Angular will not be notified, then nothing will change in the view

    1. what would happen if we changed async pipe to use detectChanges() instead?

    I guess it would work as well, but instead of only checking the changes it would directly perform the update of the view.