Performance Improvements using zone.js about ngx-countup HOT 3 CLOSED

I tested it on my project with and without and reduced change detection from 572 to 42 just by adding the code above. Angular detects all changes through zone.js even tought you use angular code, except you run the code in this (this.zone.runOutsideAngular) context.

A nice way to debug this is the following ng component I use for performance tuning:

import {Component, NgZone} from '@angular/core';

@Component({
    selector: 'debug-change-detection',
    template: '<p class="number">{{check()}}</p>',
    styles: [`
        :host {
            position: absolute;
            left: 0;
            bottom: 0;
            display: block;
        }

        .number {
            display: block;
            font-size: 40px;
        }
    `]
})

export class DebugChangeDetectionComponent {

    count = 0;

    constructor(private zone: NgZone) {
    }

    check() {
        this.zone.runOutsideAngular(() => {
                setTimeout(() => {
                    this.count = this.count + 1;
                }, 0);
            }
        );
        return this.count;
    }
}

You can also just use a {{printToConsole()}} function somewhere on the page to see the difference.

from ngx-countup.

Thanks for bringing this to my attention. So that is occurring even though the Angular directive is just providing an element reference and calling the countUp methods? CountUp itself uses requestAnimationFrame. Do you have a way to show that each frame triggers change detection?

from ngx-countup.

Wow, that's super helpful, thanks! I pushed a new version with these changes. 7.2.0

from ngx-countup.