I am looking to develop a versatile component that can utilize custom templates for data rendering, while consolidating the business logic to prevent redundancy.
Imagine this use case: a paginated list. The pagination logic should be housed within the component to avoid repetition, but the styling/presentation of the data should be customizable using ng-templates.
I have implemented the ngTemplateOutlet in the child component to reference the ng-template in the parent, however, I am encountering an error:
ERROR TypeError: templateRef.createEmbeddedView is not a function
The first ng-container in the reusable component is functioning properly, but the last three are causing the error message.
This is the code snippet for my reusable component:
@Component({
selector: 'reusable-component',
...
})
export class ChildComponent {
@ContentChild(TemplateRef) templateRef;
}
<ng-container *ngIf="...">
<ng-template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{$implicit: result}">
</ng-template>
</ng-container>
<ng-container *ngIf="..." [ngTemplateOutlet]="loading"></ng-container>
<ng-container *ngIf="..." [ngTemplateOutlet]="loadingMore"></ng-container>
<ng-container *ngIf="..." [ngTemplateOutlet]="noResults"></ng-container>
This is how the component is utilized:
<reusable-component>
<ng-template let-result>
// able to access 'result' variable here without issues.
</ng-template>
<ng-template #loading>
// Facing the mentioned error
</ng-template>
<ng-template #loadingMore>
// Facing the mentioned error
</ng-template>
<ng-template #noResults>
// Facing the mentioned error
</ng-template>
</reusable-component>
Any suggestions on resolving the issue with the last three ng-container lines in the reusable component so they can render the ng-templates appropriately?