Skip to content
Visual detecting changes in the component tree
TypeScript HTML CSS JavaScript
Branch: master
Clone or download
Latest commit ec6930d Mar 29, 2018

README.md

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.

$ 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.

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;
    }
})();
You can’t perform that action at this time.