title: Angular 2 - calling class methods in template loop *ngFor
body: <p>I have an angular2 app where the component class is getting a little to big.
  I've decided to create a folder with 'Handler' classes, so i could put the related code in each handle class. In my component class i then create an instance of each handler and use these in the template</p>
  
  <p>My component:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class DesignerComponent {
  public tab: TabHandler = new TabHandler(this);
  </code></pre>
  
  <p>My handler:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class TabHandler {
  
  public designerComponent: DesignerComponent;
  
  constructor(designerComponent: DesignerComponent)
  {
      this.designerComponent = designerComponent
  }
  
  add() {
      if (this.designerComponent.formModel.tabs.length &lt; 1) {
          this.designerComponent.formModel.tabs.push(new TabModel("Tab"));
      }
      this.designerComponent.formModel.tabs.push(new TabModel("Tab"));
  }
  </code></pre>
  
  <p>My template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;li *ngFor="let tab of formModel.tabs; let i = index; "&gt;
    &lt;a href="#" [ngClass]="{'tab-selected': formModel.currentTab == tab}"
      class="tab-button"
      attr.contenteditable="{{formModel.currentTab == tab}}"
      (blur)="tab.changeShortTitle($event)"
      (dragover)="allowDrop($event,'tab')"
      (dragstart)="drag($event,i,'tab')"
      (drop)="drop($event,i)"
      (dragleave)="dragleave()"
      (click)="tab.select(tab)"&gt;
      {{tab.shortTitle}}
    &lt;/a&gt;
  &lt;/li&gt;
  &lt;li id="add-tab-buttonholder"&gt;
    &lt;a href="#" (click)="tab.add()"&gt;&lt;i class="fa fa-plus" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>the last <code>&lt;li id="add-tab-buttonholder"&gt;
                          &lt;a href="#" (click)="tab.add()</code></p>
  
  <p>works because it's outside of the *ngFor loop.</p>
  
  <p>I have tried to create an empty function in the class, and call it in the lopp, but that also fails with the same error message</p>
  
  <blockquote>
    <p>ORIGINAL EXCEPTION: TypeError: self.context.$implicit.select is not a
    function</p>
  </blockquote>