I am showing a HTML Page loaded from my mySql Database and loading it in my angular component through .innerHTML. Looks something like this

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

With my HTML looking like this

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

So I make a request to my backend, get a string back which is the entire HTML code I need. Then load it into my angular and then show it through innerHTML. So far so good but when trying to get values from the HTML code or trying to call a function it doesn't seem to get to Angular and just tells me the function is not defined.

Part of the HTML I am loading with the function "onChange" being called at onclick

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

The function in my angular component I am trying to call:

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

Chrome console puts out:

blank:1 Uncaught ReferenceError: onChange is not defined at HTMLInputElement.onclick

My goal would be to be able to dynamically load a HTML form into my angular component and then get the values from the filled out form back.