Angular 13 从 HTML 字符串加载/编译动态 Angular 组件

Question

. Answers to this question are eligible for a +50 reputation bounty. Yogen Darji is looking for an .

I want to load or compile Angular elements as HTML from string into my component.

I am getting HTML string from API as a string and I want to load and render all HTML structural directives from that string.

 let str = `<div>Testing here
  <div *ngFor="let i of [1,2,3,4]">{{i}}</div>
 </div>`;

setTimeout(() => {
  const componentRef: ComponentRef<DynamicComponent> =
    this.createDynamicComponent<DynamicComponent>(
      DynamicComponent,
      this.vc
    );
  componentRef.instance.html = this.sanitizer.bypassSecurityTrustHtml(str);
});

But it output as instead of ngFor loop it simply loads as string.

Load Dynamic HTML
Testing here
{{i}}

Here is sample I tried

Here above is just sample HTML string. It can be anything from server like ngIf or any other inbuilt Angular directives

I have also tried using custom element createCustomElement but in that also I was not able to render Angular directives runtime from string .

Edit 1

Similar thing is working fine for This stackblitz example but If I download and run locally same error.

Answer 1

I downloaded the example at stackblitz and got it working. You can see the complete code here - https://github.com/phalgunv/Angular-Dynamic-Component-From-String

It required a couple of fixes needed to get it working for prod build.