https://github.com/angular-ru/change-detection-tree
Visual detecting changes in the component tree (View Engine)
https://github.com/angular-ru/change-detection-tree
angular change-detection changedetection detect-changes ng-zone ngzone tree
Last synced: 7 months ago
JSON representation
Visual detecting changes in the component tree (View Engine)
- Host: GitHub
- URL: https://github.com/angular-ru/change-detection-tree
- Owner: Angular-RU
- Created: 2018-03-13T16:36:12.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-29T18:00:25.000Z (almost 8 years ago)
- Last Synced: 2025-04-10T20:22:52.785Z (10 months ago)
- Topics: angular, change-detection, changedetection, detect-changes, ng-zone, ngzone, tree
- Language: TypeScript
- Homepage:
- Size: 155 KB
- Stars: 76
- Watchers: 8
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: change-detection-strategy-default-async-pipe/app/app.component.css
Awesome Lists containing this project
README
## Visual detecting changes in the component tree
> This project shows you how the component tree in Angular is updated.
> The time shown on the component nodes in the tree is the interval
> between ngDoCheck and ngAfterViewChecked.
```bash
$ git clone https://github.com/Angular-RU/change-detection-tree cd-tree && cd cd-tree
$ npm install # install all dependencies
$ ng serve # worked with jit or aot
```
### StackBlitz examples
✅ **ChangeDetection.Default + NgZone (static tree + projection)**:
Example: https://stackblitz.com/github/Angular-RU/change-detection-tree
Learn more
$ ng serve --app 0 --port 4200
✅ **ChangeDetection.OnPush + NgZone (random generate tree)**:
Example: https://stackblitz.com/github/Angular-RU/change-detection-tree/tree/onpush
Learn more
$ ng serve --app 1 --port 4201
✅ **ChangeDetection.OnPush + Async pipe - without ngZone (random generate tree)**:
Example: https://stackblitz.com/github/Angular-RU/change-detection-tree/tree/onpush-async-without-zone
Learn more
$ ng serve --app 2 --port 4202
✅ **ChangeDetection.Default + Async pipe + ngZone (random generate tree)**:
Example: https://stackblitz.com/github/Angular-RU/change-detection-tree/tree/async-pipe
Learn more
$ ng serve --app 3 --port 4203
### TODO
❌ **ChangeDetection.Default + Async pipe + Reactive Forms - without ngZone**:
Example: In progress
❌ **Custom state-management (services)**:
Example: In progress
❌ **NgRx**:
Example: In progress
❌ **MobX**:
Example: In progress
❌ **Web-worker platform**:
Example: In progress
### Checklist for detect problem
- Detect problem with Zone
> Copy the code and paste it into the console.
> If your component tree too often calls Application.tick() your application will disappear.
```typescript
let [root] = getAllAngularRootElements();
let appRoot = ng.probe(root);
let [rootComponent] = appRoot.injector.get(ng.coreTokens.ApplicationRef).components;
let ChangeDetectorRef = rootComponent.changeDetectorRef.constructor.prototype;
ChangeDetectorRef.constructor.prototype.detectChanges = (function () {
let oldDC = ChangeDetectorRef.constructor.prototype.detectChanges;
let map = new WeakMap();
return function () {
Zone.root.run(() => showChangeDetection(this));
return oldDC.apply(this, arguments);
}
function showChangeDetection (changeDetector) {
let view = changeDetector._view;
modifyNodeOpacity(view, fade);
modifyNodeOpacity(view, (node) => {
let timeout = map.get(node.renderElement);
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(() => show(node), 1000);
map.set(node.renderElement, timeout);
});
}
function modifyNodeOpacity (view, modifier) {
view.nodes.forEach(node => {
if (node && node.renderElement && node.renderElement.style) {
modifier(node);
}
});
}
function fade (node) {
let { style } = node.renderElement;
let opacity = parseFloat(style.opacity) || 1;
let newOpacity = opacity - 0.01;
style.display = 'block';
style.opacity = newOpacity > 0 ? newOpacity : 0;
}
function show (node) {
let { style } = node.renderElement;
style.display = 'block';
style.opacity = 1;
}
})();
```