Angular2 - How Digest cycle works in angular2/4

Question

How diagest cycle mechanisam achieved in Angular2, Ex : $scope is single object which keep on watching its child elements and trigger for change How angular2 done this with out $scope

https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html — Günter Zöchbauer, Sep 02 '17 at 11:45
https://stackoverflow.com/questions/34569094/what-is-the-angular2-equivalent-to-an-angularjs-watch/34570122#34570122 — Günter Zöchbauer, Sep 02 '17 at 11:58
read [Angular’s $digest is reborn in the newer version of Angular](https://blog.angularindepth.com/angulars-digest-is-reborn-in-the-newer-version-of-angular-718a961ebd3e) — Max Koretskyi, Sep 02 '17 at 13:09
is there anything unclear about [my answer](https://stackoverflow.com/a/46014136/2545680)? — Max Koretskyi, Sep 03 '17 at 13:23

score 4 · Answer 1 · answered Sep 02 '17 at 11:46

4

In Angular, the concept of change detection is automatic. There is no $scope , hence In $scope.$watch() and $scope.$digest() are no more.

You can read more on Change Detection.

answered Sep 02 '17 at 11:46

Sajeetharan

216,225
63
350
396

score 3 · Answer 2 · answered Sep 02 '17 at 13:06

In AngularJS most components/directives have a $scope associated with them. Each $scope has a set of watch functions attached to it. These watch functions perform certain tasks but the most import task is probably DOM update added through interpolation {{...}} syntax or by ng-bind directive. So imagine you have 3 components/directives that form a hierarchy of $scopes:

AComponentScope
    BComponentScope
       CComponentScope

So when AngularJS runs $digest it first triggers the watcher that updates DOM for AComponentScope, then for BComponentScope and then for CComponentScope.

In Angular there's also a task to update the DOM as part of change detection/digest. This task is performed by updateRenderer function that is generated for each component based on the template. So when Angular runs change detection it triggers that function for each component recursively just as in AngularJS. The only difference is that this process happens only once from top down while in AngularJS this process can happen up to 10 times.

For more information read these articles:

score 1 · Answer 3 · answered Sep 30 '19 at 06:43

Try this if you are also having issue with Angular default change detection mechanism. In my case, in my ionic4 Project default change mechanism of Angular was somewhat not working properly so I triggered it manually.

constructor(private ref: ChangeDetectorRef) {
     ref.detach();
     setInterval(() => {
         this.ref.detectChanges();
     }, 500);
 }

Angular2 - How Digest cycle works in angular2/4

3 Answers3