title: Angular 2 passing html to ng-content with bindings
body: <p>I'm writing angular components for the foundation css framework. I am working on the tabs component, and want to be able to pass some HTML to the <code>&lt;ng-content&gt;</code> of this.</p>
  
  <p>The problem is, I also need to pass html which a user can put bindings on, like this:</p>
  
  <p><strong>PARENT TEMPLATE</strong></p>
  
  <pre><code>&lt;tabs [data]='example'&gt;
      &lt;div&gt; Age &lt;br&gt; {{item.age}} &lt;/div&gt;`
  &lt;/tabs&gt;
  </code></pre>
  
  <p><strong>TABS COMPONENT</strong></p>
  
  <pre><code>&lt;ul class="tabs" #tabs&gt;
    &lt;li *ngFor="let item of data | async" (click)="tabClick($event)"&gt;
        &lt;a&gt;{{item.name}}&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>TABS TYPESCRIPT</strong></p>
  
  <pre><code>@Component({
    selector: 'tabs',
    templateUrl: './tabs.component.html'
  })
  
  export class TabsComponent {
    @Input('data') data:any;
    @ViewChild('tabs') tabs: ElementRef;
  }
  </code></pre>
  
  <p>Where <code>item</code> is a reference to an object in the <code>example</code> array.</p>
  
  <p>However, I get this error:
  <code>Cannot read property 'name' of undefined</code>
  as <code>item</code> is being evaluated before it is inserted into the <code>&lt;ng-content&gt;</code> directive.</p>
  
  <p>Is there a way to get around this limitation, or am I going about this the wrong way?</p>