How can i call angular/typescript function from AIML? if not possible, how can i make Javascript function call angular/typescript function?

I am trying to make the AIML template to call the submitButton() function from file.component.ts, however AIML is an XML based markup language therefore it wont accept angular syntax such as (click). Because of this, i tried using onclick to call a javascript function first then try to call submitButton() from there. However I don’t know how to do this.

I also made some changes backend to try calling angular directly by replacing some of the response.output with angular syntax hoping it would work. but it doesn’t..

I am trying to call the function from angular/typescript using a JavaScript function. How can i do this?

AIML (response.output)

<template>Select an option 
    <button id="image1" onclick="triggerFunctionInJSFile()" type="submit"> 
      <img height="200" ngmodel="chatMessageModel.input" src="https://scene7.zumiez.com/is/image/zumiez/pdp_hero/adidas-Trefoil-White-%26-Black-T-Shirt-_289236-front-US.jpg" width="200"/> Image 1
    </button>  
    <button id="image2" onclick="triggerFunctionInJSFile()" type="submit"> 
      <img height="200" ngmodel="chatMessageModel.input" src="https://scene7.zumiez.com/is/image/zumiez/pdp_hero/adidas-Trefoil-White-%26-Black-T-Shirt-_289236-front-US.jpg" width="200"/> Image 2
    </button> 
  </template> 

AIML (request.input)

  <pattern>img options</pattern>

BackendChanges.java

if(respMsg.getOutput().contains("onclick") || respMsg.getOutput().contains("ngmodel")) {
    String click = respMsg.getChatBotMsg().getOutput();
    click = click.replaceAll("bonclickb", "(click)");

    String model = click;
    model = model.replaceAll("bngmodelb", "[(ngModel)]");

    respMsg.getChatBotMsg().setOutput(model);
}

jsfile.js

function triggerFunctionInJSFile() {
    //To Do
    console.log("Triggered the function in js file ");

    fileComponent = require('./dir/file.component'); // i tried using require but doesn't work

    fileComponent.submitButton(); // calling the function from file component

}

file.component.ts

@Component({
    selector: 'app-file',
    templateUrl: './file.component.html',
    styleUrls: ['./file.component.scss']
})
export class FileComponent implements OnInit{

   constructor {}

   ngOnInit() {}

   public submitButton() {
       //submit function here
   }
}

in jsfile.js, ‘require’ will cause the function to go undefined. I’v tried some other methods as well but it doesn’t seem to work. May I know what is the correct way to do this? I’v never done something like this before and I can’t find anything that works.

Source: New feed
Source Url How can i call angular/typescript function from AIML? if not possible, how can i make Javascript function call angular/typescript function?