title: Angular 6 or 5 Performance issue on button click
body: <p>I'm currently working on an Angular 6 application. I'm facing a performance issue with a simple component: Button Click, increment or decrement a counter variable.</p>
  
  <p>The <strong>counter.component.html</strong> looks like that:</p>
  
  <pre><code>&lt;div&gt;Count: &lt;strong&gt;{{ currentCnt }}&lt;/strong&gt;&lt;/div&gt;
  
  &lt;button (click)="manageCounter()"&gt; + &lt;/button&gt;
  </code></pre>
  
  <p>the <strong>counter.component.ts</strong> looks like that:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'counter',
    templateUrl: './counter.component.html'
  })
  export class CounterComponent {
    public currentCnt = 0;
  
    public manageCounter() {
      this.currentCount++;
    }
  }
  </code></pre>
  
  <p>This is a very basic example. The counter component is used in a bigger application together with several other components. </p>
  
  <p>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.</p>
  
  <p>I'm wondering, maybe this behaviour is due to the event bubbeling. 
  Perhaps there is a better way to register the events differently?</p>
  
  <p>Do you know how to solve such a performance issue in Angular 6 or 5?</p>
  
  <p>Thank you!!</p>