title: angular 5: setting (click) value from an object not working
body: <p>I have a nav menu that is rendered using a navigation.ts json file for the menu items. When it gets to the navitem component it uses a ngIf to check if the item from the navigation file has a "function" key and if it does, the desired behavior is for it to use the string value from item.function in the object to fill the value for the (click) event. </p>
  
  <p>In reality, the console throws an error saying "_co.item.function is not a function"</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple&gt;
      &lt;mat-icon class="nav-link-icon" *ngIf="item.icon"&gt;{{item.icon}}&lt;/mat-icon&gt;
      &lt;span class="nav-link-title" [translate]="item.translate"&gt;{{item.title}}&lt;/span&gt;
      &lt;span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}"&gt;
      {{item.badge.title}}
      &lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>Navigation.ts</p>
  
  <pre><code>      [{
  "id": "accounting",
  "title": "Accounting",
  "type": "collapse",
  "children": [
    {
      "id" : "salesmenSalesLocation",
      "title": "Salesmen Sales Location",
      "type": "item",
      "function": "handleSelect(ReportTypes.SalesmenSalesLocations)"
    },
    {
      "id": "laggingLedgerEntries",
      "title": "Lagging Ledger Entries",
      "type": "item",
      "function": "handleSelect(ReportTypes.LaggingLedgerEntries)"
    }
   ]}]
  </code></pre>
  
  <p>I have also tried it as (click)="item.function" with no success.</p>