AngularでHTMLからメソッドを呼び出す方法

1. イベントバインディングを使用する方法: HTMLの要素にイベントをバインドし、そのイベントが発生したときにコンポーネント内のメソッドを呼び出すことができます。

例えば、ボタンをクリックしたときにメソッドを呼び出したい場合、以下のようにします:

HTMLファイル:

<button (click)="myMethod()">クリック</button>

コンポーネントのTypeScriptファイル:

export class MyComponent {
  myMethod() {
    // メソッドの処理を記述する
  }
}

2. テンプレート変数を使用する方法: HTMLの要素にテンプレート変数を定義し、その変数を使ってコンポーネント内のメソッドを呼び出すこともできます。

例えば、テキストフィールドでEnterキーが押されたときにメソッドを呼び出したい場合、以下のようにします:

HTMLファイル:

<input #myInput (keyup.enter)="myMethod(myInput.value)">

コンポーネントのTypeScriptファイル:

export class MyComponent {
  myMethod(value: string) {
    // メソッドの処理を記述する
  }
}

これらの方法を使えば、HTMLからAngularコンポーネント内のメソッドを簡単に呼び出すことができます。必要に応じて、メソッドの引数を渡すこともできます。

以上が、AngularでHTMLからメソッドを呼び出す方法のシンプルな解説とコード例です。