Angular 1 vs Angular 2 Output Bindings

angular1-v-angular2-component-output-bindings.js

// Angular 1
const module = angular.module('myModule', []);
module.component('myComponent', {
  bindings: {
    buttonClick: '&'
  },
  controller() {
    this.clickCount = 0;
    this.onButtonClick = () => {
      this.buttonClick({clicks: ++this.clickCount});
    };
  },
  template: `
    <div>
      <button ng-click="$ctrl.onButtonClick()>Click Me!</button> 
    </div>
  `
});

// Usage
// <my-component button-click="$ctrl.onButtonClick(clicks)"></my-component>

/***************************************************************/

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

@Component({
  selector: 'my-component',
  template: `
    <div>
      <button ng-click="onButtonClick()>Click Me!</button> 
    </div>
  `
})
class MyComponent {
  @Output() buttonClick: EventEmitter<number> = new EventEmitter();
  
  private clickCount: number = 0;
   
  onButtonClick() {
    this.buttonClick.emit(++this.clickCount);
  }
   
}

// Usage
// <my-component (buttonClick)="onButtonClick($event)"></my-component>