feat(change-detection-strategy-onpush-no-zone): bugfix

Author: mivanov

README.md

@@ -30,6 +30,35 @@ Example: https://stackblitz.com/github/Angular-RU/change-detection-tree/tree/onp
 $ ng serve --app 1 --port 4201
 ```
 
+- **ChangeDetection.OnPush + Async pipe - without ngZone (random generate tree)**: <br>
+Example: https://stackblitz.com/github/Angular-RU/change-detection-tree/tree/onpush-async-without-zone
+
+![](https://habrastorage.org/webt/jq/0t/_l/jq0t_ltli9iyvjtuvumct6awfmk.gif)
+
+```bash
+$ ng serve --app 2 --port 4202
+```
+
+- **ChangeDetection.Default + Async pipe + ngZone (random generate tree)**: <br>
+Example: https://stackblitz.com/github/Angular-RU/change-detection-tree/tree/async-pipe
+
+
+```bash
+$ ng serve --app 3 --port 4203
+```
+
+- **Custom state-management (services)**: <br>
+Example: In progress
+
+- **NgRx**: <br>
+Example: In progress
+
+- **MobX**: <br>
+Example: In progress
+
+- **Web-worker platform**: <br>
+Example: In progress
+
 #### Detect problem with Zone
 
 > Copy the code and paste it into the console. 

change-detection-strategy-onpush-no-zone/app/app.component.html

@@ -6,12 +6,12 @@
 <tree>
   <div>
     <div class="center">
-      count = {{ countTree$|async|json }}
+      count$ = {{ countTree$|async|json }}
     </div>
   </div>
 
   <child
-    [limit]="{ deep: 6 }"
+    [limit]="{ deep: 5, limitComponents: { input: 1, button: 1} }"
     [count$]="countTree$">
   </child>
 </tree>

change-detection-strategy-onpush-no-zone/app/component/factorial/factorial.component.html

@@ -1,7 +1,7 @@
 <div class="factorial">
   <p>FactorialComponent: </p>
-  <input type="number" [(ngModel)]="factorialValue" min="0"><br>
-  {{factorialValue}}! = {{factorial(factorialValue)}} <br><br>
+  <input type="number" [ngModel]="factorialValue" (ngModelChange)="updateValue($event)" min="0"><br>
+  {{factorialValue}}! = {{factorialValueResult||factorial(factorialValue)}} <br><br>
   <div #total class="computed"></div>
   <div #execute class="execute"></div>
 </div>

change-detection-strategy-onpush-no-zone/app/component/factorial/factorial.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, ElementRef, NgZone, ViewChild} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, NgZone, ViewChild} from '@angular/core';
 import * as math from 'mathjs';
 
 math.config({number: 'BigNumber', precision: 100});
@@ -11,26 +11,28 @@ math.config({number: 'BigNumber', precision: 100});
 })
 export class FactorialComponent {
   public factorialValue = 10;
+  public factorialValueResult: number = 0;
   private executeCount: number = 0;
   @ViewChild('total', {read: ElementRef}) private total: ElementRef;
   @ViewChild('execute', {read: ElementRef}) private execute: ElementRef;
 
-  constructor(private ngZone: NgZone) {}
+  constructor(private ngZone: NgZone, private cd: ChangeDetectorRef) {}
+
+  public updateValue(val) {
+    this.factorialValueResult = this.factorial(val);
+    this.cd.detectChanges();
+  }
 
   public factorial(n) {
     this.executeCount++;
     const start = performance.now();
     const result = math.eval(`${n}!`).toString();
     const total = Math.ceil(performance.now() - start);
 
-    this.ngZone.runOutsideAngular(() => {
-      setTimeout(() => {
-        if (this.total) {
-          this.total.nativeElement.setAttribute('data-total', total);
-          this.execute.nativeElement.setAttribute('data-execute', this.executeCount);
-        }
-      }, 2000);
-    });
+    if (this.total) {
+      this.total.nativeElement.setAttribute('data-total', total);
+      this.execute.nativeElement.setAttribute('data-execute', this.executeCount);
+    }
 
     return result;
   }

change-detection-strategy-onpush-no-zone/app/component/interval/interval.component.ts

@@ -61,6 +61,7 @@ export class IntervalComponent extends TreeNode {
   private timerInterval() {
     this.timer = window.setInterval(() => {
       this.formatDate = this.getFormattedDate();
+      this.cd.detectChanges();
     }, 1000);
   }