Using the ngForTemplate in a ListView component for custom templates has proven to be challenging.
Modified list-view.component.html:
<div class="list-view">
<template ngFor [ngForOf]="items" [ngForTemplate]="template">
</template>
</div>
Updated 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;
}
One issue arises when trying to implement it with a structure like this:
<m-list-view [items]="categories">
<template let-item="$implicit">
**some HTML markup**
</template>
</m-list-view>
The output ends up being different from what is expected, which should look like this instead:
<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>
In order to achieve the desired result of wrapping each list view item template in div.list-view-item, further adjustments need to be made.