Angular6を用いてindex.htmlで定義したfunctionを呼びたい

Question

index.htmlでは以下のように
functionを定義しているのですが

function testAlert(string){
    alert(string);
}

これを以下のようにangularのcomponent.htmlから呼び出せません

<div onClick="testAlert({{test}})">alert test</div>

呼び出せる方法などありましたら教えていただけたらと思います

補足
visual studio codeでは以下のようなエラーが出ています

[Angular]
Binding to event property 'onClick' is disallowed for security reasons, please use (Click)=...
If 'onClick' is a directive input, make sure the directive is imported by the current module.
(property) test: any

Comments

[m.ts10806]

エラーとか出てませんか？該当のコードで起きた現象を追記してください

[yryuu]

エラーを記載いたしました

[h_daido]

エラー文言そのままっぽいのでは？<div (click)="testAlert({{test}})">alert test</div>

Answer 1

テンプレートから呼ぶ関数はコンポーネントで定義されている必要があるはずなので、クッションを入れればよいかと。

// hoge.component.ts
import xxxxxxxxxxx

declare var testAlert: any;  // ← importのあとぐらいにindex.htmlで宣言した関数を宣言

@Component({
// ・・・・・・・・・・・・・・・


  clickEvent(e : string) {  // ←クリックイベントを呼びindexで定義された関数を呼ぶ
    testAlert(e);
  }

<div onClick="clickEvent(test)">alert test</div>