Mapping JS events as component outputs in Angular

Question

As part of a component-based JS library (ng 1.5, ng2, response, whatever) I wrap a JS library that provides about 20 events. The component creates an instance of JS lib, attaching it to this component.

I expose these events to the JS component as separate outputs.

I feel that each event, which is the only way out, is good, because it clearly tells you what is available for joining, but are there any problems / recommendations against this?

There may be a maximum number of attributes that you can attach to a DOM node. An alternative would be to view a single output with properties such as: eventNameand data.

JS:

angular.component('thing', {
  controller: controller,
  bindings: {
    one: '&',
    two: '&',
    three: '&',
    four: '&',
    five: '&',
    six: '&',
    seven: '&',
    eight: '&',
    nine: '&',
    ten: '&',
    eleven: '&',
    twelve: '&',
    thirteen: '&',
    fourteen: '&',
    fifteen: '&',
    sixteen: '&',
    seventeen: '&',
    eighteen: '&',
    nineteen: '&',
    twenty: '&',
  }
});

HTML:

<thing
  one="doSomething($event)"
  two="doSomething($event)"
  three="doSomething($event)"
  four="doSomething($event)"
  five="doSomething($event)"
  six="doSomething($event)"
  seven="doSomething($event)"
  eight="doSomething($event)"
  nine="doSomething($event)"
  ten="doSomething($event)"
  eleven="doSomething($event)"
  twelve="doSomething($event)"
  thirteen="doSomething($event)"
  fourteen="doSomething($event)"
  fifteen="doSomething($event)"
  sixteen="doSomething($event)"
  seventeen="doSomething($event)"
  eighteen="doSomething($event)"
  nineteen="doSomething($event)"
  twenty="doSomething($event)"></thing>