Toggle a button counter

Question

I would like to do the like increment and decrements with same button. I have written this, but it just increment the like counts, how can I change it in order to decrements it after increment?

<button (click)="increment()">{{count}}</button>

export class TheComponent {
    public count = 10;

    public increment() {
    this.count++;
  }
}

Answer 1

You can simply maintain your count state when clicked. If it is already counted, then decrement else increment the count:

Try the following:

export class TheComponent {
    public count = 100;
    private isCounted: boolean = false;
    public updateCount() {
     this.count += this.isCounted? -1 : 1;
     this.isCounted= !this.isCounted;
  }
}