Thursday, 23 January 2020

How to use ng-template inside innerHTML in Angular

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