(keyup.enter) triggered twice | Angular

So I have an HTML with increment and decrement functionality on button/enter click. Button (click) works as expected however on (keyup.enter) increment function is triggered twice.

When I press Tab + enter on keyboard (keyup.enter) and (click) both events are triggered which is calling the function twice

<div class="container">
<div class="row">
    <div class="col-sm" style="text-align:center">
        <h2> Increment/Decrement Functionality</h2>
    </div>
</div>
<div class="row" style="margin: 40px">
    <div class="col-sm">
        Increment All <button  (click)="incrementAll()" (keyup.enter)="incrementAll()"> +
        </button>
        Decrement All
        <button (click)="decrementAll()" (keyup.enter)="decrementAll()"> - </button>
    </div>
</div>
<div class="row" style="margin: 40px">
    <div class="col-sm" *ngFor="let num of countNumbers; let i = index" style="margin: 20px">
        <input name="countNumbers_{{i}}" type="number" [(ngModel)]="num.number" #ngModel>
        <button (click)="decrement(i)" (keyup.enter)="decrement(i)"[ngClass]="{'disabledIcon': num.number === 0 }"style="margin:20px"> -
  </button>
        <button (click)="increment(i)"
     (keyup.enter)="increment(i)"> +
  </button>
    </div>
</div>

Typescript:

increment(index) {
    this.countNumbers[index].number += 1;
}

decrement(index) {
    if (this.countNumbers[index].number > 0) {
        this.countNumbers[index].number -= 1;
    }
}

incrementAll() {
for (let i = 0; i < this.countNumbers.length; i++) {
  this.countNumbers[i].number += 1;
}
}
decrementAll() {
for (let i = 0; i < this.countNumbers.length; i++) {
  if (this.countNumbers[i].number > 0) {
    this.countNumbers[i].number -= 1;
  }
}

DEMO