I'm currently working on an Angular 6 application. I'm facing a performance issue with a simple ponent: Button Click, increment or decrement a counter variable.

The counterponent.html looks like that:

<div>Count: <strong>{{ currentCnt }}</strong></div>

<button (click)="manageCounter()"> + </button>

the counterponent.ts looks like that:

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

@Component({
  selector: 'counter',
  templateUrl: './counterponent.html'
})
export class CounterComponent {
  public currentCnt = 0;

  public manageCounter() {
    this.currentCount++;
  }
}

This is a very basic example. The counter ponent is used in a bigger application together with several other ponents.

The problem is, when I quickly click the button several times on a smartphone or if I change the Chrome settings=>Performance to CPU: Slowdown, and click the button several times in a row, the Counter increments or decrements very slowly, with a delay of a few milliseconds.

I'm wondering, maybe this behaviour is due to the event bubbeling. Perhaps there is a better way to register the events differently?

Do you know how to solve such a performance issue in Angular 6 or 5?

Thank you!!

I'm currently working on an Angular 6 application. I'm facing a performance issue with a simple ponent: Button Click, increment or decrement a counter variable.

The counter.ponent.html looks like that:

<div>Count: <strong>{{ currentCnt }}</strong></div>

<button (click)="manageCounter()"> + </button>

the counter.ponent.ts looks like that:

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

@Component({
  selector: 'counter',
  templateUrl: './counter.ponent.html'
})
export class CounterComponent {
  public currentCnt = 0;

  public manageCounter() {
    this.currentCount++;
  }
}

This is a very basic example. The counter ponent is used in a bigger application together with several other ponents.

The problem is, when I quickly click the button several times on a smartphone or if I change the Chrome settings=>Performance to CPU: Slowdown, and click the button several times in a row, the Counter increments or decrements very slowly, with a delay of a few milliseconds.

I'm wondering, maybe this behaviour is due to the event bubbeling. Perhaps there is a better way to register the events differently?

Do you know how to solve such a performance issue in Angular 6 or 5?

Thank you!!

• javascript
• angular

• 2 You can try (click)="manageCounter(); $event.stopPropagation();" to see if it makes a difference. – Martin Parenteau Commented May 16, 2018 at 18:03
• I just up-converted a app from 5 and I'm having the same issue. Basically about 1.5 seconds of JavaScript is running from event (click) thru zone.js. Stopping propagation didn't have much effect on a larger view. So maybe need a different solution? – Mark Commented Jul 4, 2018 at 1:26

2 Answers 2

You can try with stopping propagation as:

HTML

<button (click)="manageCounter($event)"> + </button>

ponent.ts

public manageCounter($event) {
    $event.stopPropagation();
    this.currentCount++;
}

I'm going to follow up with a possibility. If you are in dev-mode you may be getting more lag off zone.js. I just realized all my problems are when I'm running ng serve --open .. but when I run my buildprod task, the prod version is peppy.

ng build --target=production --environment=prod give that a shot.

Edit: I had to switch to ng build --prod in Angular 6 too.