Estoy mostrando una página HTML cargada desde mi base de datos mySql y cargándola en mi componente angular a través de .innerHTML. se parece a esto

 get(): void { this.dataServ.getMds(this.formName).subscribe((value: any) => { this.dataSource = value; this.form = '<div ng-app="formApp" ng-controller="formController">' + this.dataSource + '</div>'; }); }

Con mi HTML luciendo así

 <div [innerHtml]="form | sanitizehtml"> </div>

Así que hago una solicitud a mi backend, obtengo una cadena que es el código HTML completo que necesito. Luego cárguelo en mi angular y luego muéstrelo a través de innerHTML. Hasta ahora todo bien, pero cuando intento obtener valores del código HTML o intento llamar a una función, no parece llegar a Angular y simplemente me dice que la función no está definida.

Parte del HTML que estoy cargando con la función "onChange" que se llama al hacer clic

 <input type="checkbox" id="boxal" name="test1" [checked]="select" onclick="onChange()" (click)="onChange()">

La función en mi componente angular que estoy tratando de llamar:

 onChange() { console.log("TEST")}

La consola de Chrome apaga:

en blanco: 1 Error de referencia no detectado: onChange no está definido en HTMLInputElement.onclick

Mi objetivo sería poder cargar dinámicamente un formulario HTML en mi componente angular y luego recuperar los valores del formulario completado.