title: Is it possible to dynamically add output properties to an angular 2 component?
body: <p>I am on my way to create my own angular 2 module which I called <strong>angular2-actionable-table</strong>.</p>
  
  <p>The goal of this module is to provide a generic table to use when we want to make some actions on some data. (for example: we can use this module to create a CRUD table).</p>
  
  <p>I begin with writing some simple typescript classes.</p>
  
  <pre><code>export class Column{
    constructor(public name: string) {
    }
  }
  
  export class Action {
    constructor(public name: string) {
    }
  }
  </code></pre>
  
  <p>And the component class.</p>
  
  <pre><code>import {Component, OnInit, Input} from '@angular/core';
  import {Action} from "./models/action.model";
  import {Column} from "./models/column.model";
  
  @Component({
     selector: 'app-angular2-actionable-table',
     templateUrl: './angular2-actionable-table.component.html',
     styleUrls: ['./angular2-actionable-table.component.css']
  })
  export class Angular2ActionableTableComponent implements OnInit {
  
    @Input() columns: Column[];
    @Input() actions:Action[];
  
    constructor() { }
  
    ngOnInit() {
  
    }
  
  }
  </code></pre>
  
  <p>So the client of this module can make this</p>
  
  <pre><code>&lt;app-angular2-actionable-table [columns]="columns" [actions]="actions"&gt;&lt;/app-angular2-actionable-table&gt;
  </code></pre>
  
  <p>What I want to do in the <strong>Angular2ActionableTableComponent</strong> is to dynamically add output properties according to the <strong>columns</strong> attribute. In other words, let's say the client has passed as input value this <code>columns = [new Action('edit'), new Action('validate')]</code>. So I want to make something similar to this in the <strong>Angular2ActionableTableComponent</strong></p>
  
  <pre><code>for(let i=0; i&lt;this.columns.length; i++){
    @Output() Angular2ActionableTableComponent.prototype[this.columns[i].name];
    // The syntax is wrong for sure
  }
  </code></pre>
  
  <p>And then after emitting events to each action, the client can do this</p>
  
  <pre><code>&lt;app-angular2-actionable-table [columns]="columns" [actions]="actions"
      (edit)="onEdit($event)" (validate)="onValidate($event)"&gt;
  &lt;/app-angular2-actionable-table&gt;
  </code></pre>
  
  <p>I am not sure if this is possible in Angular 2 using Typescript.</p>