title: Angular (5) - (click) event function name in model
body: <p>I have a hard time explaining the issue to myself with words, so it is darn harder to write it down for you to understand, but I hope you get the idea and have a solution.</p>
  
  <p>I'm currently working on a Angular(5) project where I want to create a generic component which takes an array of my button models as input. </p>
  
  <p>My problem is that I can't seem to figure out how to add a function name to that button model for use in the (click) event. Like</p>
  
  <pre><code>export interface ButtonModel{
       value: string;
       functionName: doSomethingOnClick(); &lt;---- problem area
  }
  
  //Component holding the buttons
  component{
      @Input() buttons: ButtonModel;
  
      doSomethingOnClick(){
        console.log('this works');
      }
  }
  </code></pre>
  
  <p>Which I then should be able to use as</p>
  
  <pre><code>&lt;button value="{{btnModel.value}}" (click)="btnModel.functionName"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>I really don't know if this is even possible. The closest I can get, with my own knowledge is to just hardcode all the buttons and then use an *ngIf to show the ones needed, but being able to just add them dynamically would be a lot smarter.</p>
  
  <p>Thank you in advance</p>