Calling a TypeScript function from a JavaScript function

Question

On the file app-component.html there is a button:

<button type="button" onclick="confirmChanges()">Save Changes</button>

This confirmChanges calls a javascript function located on my index.html file:

<script>
    function confirmChanges(){
      var optionSelected = confirm('Are you sure?');
      if(optionSelected == true){
        alert('Changes were applied sucessfully!');
        updateAddress();
      } else{
        alert('You discarded the changes!');
      }
    } 
  </script>

The updateAddress() function its on my app-component.ts file. I would like to know how I could call a typescript function from a javascript function without getting Uncaught ReferenceError. Thank you.

Why is his click event not bound and handled within typescript? — Kevin B, Apr 11 '18 at 18:50
Does this answer your question? [Calling properly TypeScript code from JavaScript](https://stackoverflow.com/questions/26427722/calling-properly-typescript-code-from-javascript) — Michael Freidgeim, Jul 23 '21 at 14:14

score 1 · Answer 1 · answered Apr 11 '18 at 18:45

1

Yes you can, as long as your typescript is correctly compiled in Javascript, and your function is exported in the global scope.

But I have to say, it seems wrong to do that in so many way. First exposing something in the global scope is never a good idea. Second, I don't see why you would want to wrote pure javascript scripts in an Angular application.

But yes, technically, it's possible to do what you want, event though I strongly advise against it.

Hope that helps

answered Apr 11 '18 at 18:45

Orodan

1,047
2
13
24

It's hard to give a helpful answer to subpar question. This one is more like verbose comment rather than answer. It doesn't answer the question. – Estus Flask Apr 11 '18 at 20:59
Thank you for your answer, but can you give and advise on how should I do it?! – Apr 12 '18 at 12:12

score 0 · Answer 2 · answered Apr 11 '18 at 18:48

Think you'll find the answer here.

Uncaught ReferenceError: <function> is not defined at HTMLButtonElement.onclick

Short answer is you need to add it to global scope. E.g add it to index.html and it should fire. But I recommend that you add it to your .ts-file and rewrite the function

Calling a TypeScript function from a JavaScript function

2 Answers2