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

Question

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("\\bonclick\\b", "(click)");

    String model = click;
    model = model.replaceAll("\\bngmodel\\b", "[(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.

score 1 · Answer 1 · answered Aug 16 '19 at 09:16

1

One option is to use angular click that calls your component method. Then this component method calls your javascript method.

<button type="button" (click)="componentFunction()" >Check</button>


componentFunction(){
  triggerFunctionInJSFile();
}

Note: your js function should be in global scope.

answered Aug 16 '19 at 09:16

Irshad Ali

1,153
1
13
39

AIML doesn't recognize angular syntax (click). due to that i need to call js first. do you know how to call angular function into js function? – Zaid Aug 16 '19 at 09:34
Check these: https://stackoverflow.com/a/35297044 or https://stackoverflow.com/a/35276652 – Irshad Ali Aug 16 '19 at 09:47
Thanks @IrshadAli. the window reference actually solve my problem! – Zaid Aug 21 '19 at 03:43

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

1 Answers1