Quiero cargar o compilar Angular elements as HTML desde string en mi componente.

Obtengo una cadena HTML de la API como una cadena y quiero cargar y representar todas las directivas estructurales HTML de esa cadena.

 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); });

Pero da salida como en lugar de ngFor loop, simplemente se carga como una cadena.

 Load Dynamic HTML Testing here {{i}}

Aquí hay una muestra que probé

Aquí arriba hay solo una cadena HTML de muestra. Puede ser cualquier cosa, desde un servidor como ngIf o cualquier otra directiva Angular incorporada

También intenté usar el elemento personalizado createCustomElement , pero tampoco pude representar el Angular directives runtime from string .

Editar 1

Algo similar funciona bien para este ejemplo de stackblitz, pero si descargo y ejecuto localmente, el mismo error.