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 `<ng-content>` of this.

The problem is, I also need to pass html which a user can put bindings on, like this:

**PARENT TEMPLATE**

```
<tabs [data]='example'>
    <div> Age <br> {{item.age}} </div>`
</tabs>

```

**TABS COMPONENT**

```
<ul class="tabs" #tabs>
  <li *ngFor="let item of data | async" (click)="tabClick($event)">
      <a>{{item.name}}</a>
  </li>
</ul>
<div>
  <ng-content></ng-content>
</div>

```

**TABS TYPESCRIPT**

```
@Component({
  selector: 'tabs',
  templateUrl: './tabs.component.html'
})

export class TabsComponent {
  @Input('data') data:any;
  @ViewChild('tabs') tabs: ElementRef;
}

```

Where `item` is a reference to an object in the `example` array.

However, I get this error:
`Cannot read property 'name' of undefined`
as `item` is being evaluated before it is inserted into the `<ng-content>` directive.

Is there a way to get around this limitation, or am I going about this the wrong way?