Angularにおける双方向データバインディング

Angularでは、入力フィールドにテキストを入力すると、そのテキストが自動的にクラスのプロパティに反映されるように設定することができます。 これは双方向データバインディングと呼ばれます。

このバインディングを機能させるには、まず有効にする必要があります。 そのためには、コンポーネントファイルでFormsModuleをインポートします：

app/app.component.tsimport { FormsModule } from '@angular/forms';

次に、デコレータ@Componentのプロパティimportsに追加します：

app/app.component.ts@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, UserComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

これで双方向データバインディングが有効になり、利用できるようになります。 実際に試してみましょう。

まず、双方向バインディングの対象となるクラスのプロパティを宣言します：

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

div要素とinput要素があるとします。div要素にはクラスのプロパティを表示させます：

html<div>
  {{ text }}
</div>
<input>

プロパティtextをinput要素の変更にバインドしましょう。 そのためには、input要素内に特別なディレクティブ[(ngModel)]を記述し、その値としてクラスのプロパティを指定します：

html<div>
  {{ text }}
</div>
<input [(ngModel)]="text">

コードを実行し、inputフィールドにテキストを入力し始めると、そのテキストがすぐにdiv要素内に表示され始めます。