title: Angular2 how to set element class name when using ng-for, only on first element
body: <p>I have building a <code>ul</code> and want to set the class only on the first <code>li</code> element.</p>
  
  <p>I want to set the <code>class="active"</code> only on the first li.  I do get the index into the class attribute but that isn't what I want.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, View, NgFor,Inject,forwardRef,Input, NgIf,  FORM_DIRECTIVES } from 'angular2/angular2';
  @Component({
      selector: 'tabs'
  })
  @View({
      template: `
          &lt;ul&gt;
             &lt;li *ng-for="#tab of tabs;#index = index" class="{{index}}" (click)="selectTab(tab)"&gt;{{tab.tabTitle}}&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ng-content&gt;&lt;/ng-content&gt;
    `,
      directives: [NgFor]
  })
  
  export class Tabs {
      get tabs() {
          return this._tabs;
      }
  
      set tabs(value) {
          this._tabs = value;
      }
      private _tabs;
  
      constructor() {
          console.log("ctor.Tabs");
          this._tabs = [];
      }
  
      selectTab(tab) {
          this._tabs.forEach((tab) =&gt; {
              tab.active = false;
          });
          tab.active = true;
      }
  
      addTab(tab: Tab) {
          if (this._tabs.length === 0) {
              tab.active = true;
  
          }
          else {
              tab.active = false;
          }
          this._tabs.push(tab);
      }
  }
  
  @Component({
      selector: 'tab',
      properties: ['tabTitle: tab-title']
  })
  @View({
      template: `
      &lt;div [hidden]="!active" [class]="active"&gt;
        &lt;ng-content/&gt;
      &lt;/div&gt;
    `
  })
  export class Tab {
      @Input() index: number;
  
      constructor(@Inject(forwardRef(() =&gt; Tabs)) tabs: Tabs) {
          console.log("ctor.Tab") ;
          tabs.addTab(this);
          console.log(tabs);
      }
  
      get active() {
          return this._active;
      }
      set active(value) {
          this._active = value;
      }
      private _active;
  
  
  }</code></pre>
  </div>
  </div>
  </p>