//normal component with @Output event
@Component({
  selector: 'incrementer',
  template: `
  <div>
    <button (click)="increments.emit(1)">increment</button>
  </div>`
})
class Incrementer {
  @Output() increments = new EventEmitter();
}


@Component({
  selector: 'angularclass-app',
  directives: [ Incrementer ],
  template: `
    <div>
      <h4>Child Total Count: {{ counter }}</h4>
      <incrementer></incrementer>
      <button #decrement>decrement</button>
    </div>
  `
})
export class AngularclassApp {
  //query and listen to component output
  @ObserveViewChild(Incrementer) increments = new EventEmitter(); // same as ViewChild but you can use it now as an EventEmitter
  
  //query and listen to a DOM element
  @ObserveViewChild('decrement', 'click') decrements = new EventEmitter();


}

//normal component with @Output event
@Component({
  selector: 'incrementer',
  template: `
  <div>
    <button (click)="increments.emit(1)">increment</button>
  </div>`
})
class Incrementer {
  @Output() increments = new EventEmitter();
}


@Component({
  selector: 'angularclass-app',
  template: `
    <div>
      <h4>Total Count: {{ counterChange }}</h4>
      <incrementer></incrementer>
      <button #decrement>decrement</button>
    </div>
  `,
  directives: [Incrementer]
})
export class AngularclassApp {
  //query and listen to component output
  @ObserveViewChild(Incrementer) increments = new EventEmitter();
  
  //query and listen to a DOM element
  @ObserveViewChild('decrement', 'click') decrements = new EventEmitter();

  // Notice how we're able to just return an Observable
  counterChange = Observable.merge(
    this.increments,
    this.decrements.mapTo(-1)
  )
  .startWith(0)
  .scan((total, value) => total + value, 0);
    

}