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

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

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

import { FormsModule } from '@angular/forms';

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

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

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

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

export class AppComponent {
	public text: string = '';
}

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

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

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

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

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

input要素と段落が与えられています。input要素には数値が出力されます。 inputフィールドに数値を入力すると、段落にその数値の2乗が表示されるようにしてください。

2つのinput要素と1つの段落が与えられています。input要素には数値が入力されます。段落に入力された数値の合計が表示されるようにしてください。