import {Component, EventEmitter, Input, Output} from '@angular/core';

@Component({
  selector: 'counter',
  template: `
    <button style="display: block" (click)="increment()">+</button>
    <span style="display: block">{{ counter }}</span>
    <button style="display: block" (click)="decrement()">-</button>
  `
})
export class CounterComponent {
  private _counter: number = 0;

  @Output()
  counterChange: EventEmitter<number> = new EventEmitter();

  @Input()
  get counter() {
    return this._counter;
  }

  set counter(newCounter: number) {
    this._counter = newCounter;
    this.counterChange.emit(newCounter);
  }

  increment(): void {
    this.counter += 1;
  }

  decrement(): void {
    this.counter -= 1;
  }
}