Can someone help me, how to use ng-template inside innerHTML tag,
Stackblitz Demo: https://stackblitz.com/edit/angular-xgnnj4
What I wanted to do is,
In the Component HTML
<div [innerHTML]="htmlString"><div>
In the Component TS
@ViewChild('dynamicComponent', { static: false, read: ViewContainerRef }) myRef: ViewContainerRef;
htmlString = `<ng-template #dynamicComponent></ng-template>`;
ngAfterViewInit(): void {
const factory = this.componentFactoryResolver.resolveComponentFactory(CommentComponent);
const ref = this.myRef.createComponent(factory);
ref.changeDetectorRef.detectChanges();
}
I really need to achieve this way because I wanted to get the HTML content from an API and use that value to display the HTML content dynamically
As I am getting the error as Cannot read property 'createComponent' of undefined but if I put outside the innerHTML it works perfectly
I have gone through https://angular.io/guide/dynamic-component-loader but it's not helping my scneario
from How to use ng-template inside innerHTML in Angular
No comments:
Post a Comment