I'm having trouble with rendering components and here is the code snippet:
<my-component>
<ng-template *ngFor="let item of data">
<child-component>
<div>
{{ data.title }}
</div>
</child-component>
</ng-template>
</my-component>
Within my-component.ts file, I have the following code snippet:
@ContentChildren(TemplateRef) template: QueryList<TemplateRef<any>>;
ngAfterContentInit(): void {
this.template.forEach(item => {
const template = this.viewTemplateRef.createEmbeddedView(item);
template.detectChanges();
});
}
Whenever I push new data into the component, I want to display a new child component. However, when attempting something like this:
this.template.changes.subscribe((result) => {
this.template.forEach(item => {
this.viewTemplateRef.createEmbeddedView(item);
});
});
I end up in an infinite loop. What would be the correct approach to solving this issue?
Check out this example on StackBlitz