Angular 2 passing html to ng-content with bindings

Question

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?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

update Angular 5

ngOutletContext was renamed to ngTemplateOutletContext

See also https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

original

ngTemplateOutlet or ngForTemplate can be used for that use case:

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

@Component({
  ...
  template: `
    <ul class="tabs" #tabs>
      <li *ngFor="let item of data | async" (click)="tabClick($event)">
          <a>{{item.name}}</a>
      </li>
    </ul>
    <div>
      <ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{$implicit: (data | async)}"></ng-template>
    </div>
  `
})
class TabsComponent {
  @ContentChild(TemplateRef) templateRef:TemplateRef;
}

See also Angular 2 bind transcluded content to loop variable

Angular 2 passing html to ng-content with bindings

Sign up