入力を受け取る

導入

テキスト入力の内容を受け取って、その場で表示に反映してみましょう。入力イベント (input) と、入力欄の値 $event.target.value を使います。

説明

入力するたびに onInput が呼ばれ、text を更新します。

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <input [value]="text" (input)="onInput($event)" placeholder="名前を入力" />
    <p>こんにちは、{{ text || '名無し' }} さん</p>
    <p>文字数: {{ text.length }}</p>
  `,
})
class AppComponent {
  text: string = '';
  onInput(event: Event): void {
    this.text = (event.target as HTMLInputElement).value;
  }
}

• (input)="onInput($event)" … 入力イベントを受け取り、$event（イベントオブジェクト）を渡します。
• event.target as HTMLInputElement … TypeScript に「これは入力要素」と教える書き方（as は型アサーション）。
• [value]="text" で入力欄の中身を text と同期させています。

やってみよう

入力した文字を大文字にして表示してみましょう（{{ text.toUpperCase() }}）。