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>
<tabs [data]='example'>
<div> Age <br> {{item.age}} </div>`
</tabs>
<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>
@Component({
selector: 'tabs',
templateUrl: './tabs.component.html'
})
export class TabsComponent {
@Input('data') data:any;
@ViewChild('tabs') tabs: ElementRef;
}
item
example
Cannot read property 'name' of undefined
item
<ng-content>
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