The answer provided for the issue regarding dynamic template generation based on value instead of variable in this thread was really helpful. However, I'm facing challenges in getting it to work. Here's a simplified example:
export class A {
}
export class MyComponent implements OnInit {
public controls$ = Observable<any[]>([]);
ngOnInit() {
this.controls$.next([new A()]);
}
public getControlType(control: any) {
if (control instanceof A) {
return "AControl";
}
return "";
}
}
Template:
<div *ngFor="let control of control$ | async">
{{ getControlType(control) }}
</div>
This yields:
AControl
Everything works as expected up to this point. But when I add a template, an exception is thrown:
<div *ngFor="let control of control$ | async">
{{ getControlType(control) }}
<ng-container
[ngTemplateOutlet]="getControlType(control)"
[ngTemplateOutletContext]="{ control: control }">
</ng-container>
</div>
<ng-template
#AControl
let-item="control">A Control</ng-template>
This throws:
templateRef.createEmbeddedView is not a function
I am unsure about what modifications are needed for the #AControl template to render within the container.