kulaeff kulaeff - 3 months ago 93
TypeScript Question

How to wrap template using ngForTemplate?

I try to make ListView component using

ngForTemplate
for custom templates

list-view.component.html

<div class="list-view">
<template ngFor [ngForOf]="items" [ngForTemplate]="template">
</template>
</div>


list-view.component.ts

@Component({
selector: 'm-list-view',
styleUrls: ['./list-view.component.less'],
templateUrl: './list-view.component.html'
})

export class ListViewComponent {
@Input() items: any[] = [];

@ContentChild(TemplateRef)
template: any;
}


When I use it like this:

<m-list-view [items]="categories">
<template let-item="$implicit">
**some HTML markup**
</template>
</m-list-view>


the resulting is:

<m-list-view>
<div class="list-view">
**some HTML markup**
**some HTML markup**
**some HTML markup**
...
</div>
</m-list-view>


but I need this:

<m-list-view>
<div class="list-view">
<div class="list-view-item">**some HTML markup**</div>
<div class="list-view-item">**some HTML markup**</div>
<div class="list-view-item">**some HTML markup**</div>
...
</div>
</m-list-view>


What should I do to wrap each list view item template in div.list-view-item?

Answer
<div class="list-view">
  <div class="list-view-item" *ngFor="let item of items">
    <template [ngTemplateOutlet]="template" [ngOutletContext]="item"></template>
  </div>
</div>

See also https://angular.io/docs/ts/latest/api/common/index/NgTemplateOutlet-directive.html

Comments