Angularにおけるリアクティビティ

パブリックプロパティの変更があった際、テンプレートはリアクティブに、つまり即座に反応して変化します。これがAngularにおけるリアクティビティの仕組みです。

例を見てみましょう。テキストを含むプロパティがあるとします:

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

このプロパティを何らかのタグ内に表示しましょう:

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

次に、クリックするとクラスのメソッドを呼び出すボタンを作成します:

<button (click)="show()">
	show
</button>

このメソッド内でテキストを変更します:

export class AppComponent {
	public text: string = '';
	
	public show(): void {
		this.text = 'hello';
	}
}

さて、コードを実行してボタンを押すと、クリック直後にdiv内のテキストが変更されます。

divと2つのボタンを作成してください。最初のボタンを押すとdivに1つのテキストが表示され、 2番目のボタンを押すと別のテキストが表示されるようにしてください。