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

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

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

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

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

app/app.component.html<div>
  {{ text }}
</div>

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

app/app.component.html<button (click)="show()">
  show
</button>

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

app/app.component.tsexport class AppComponent {
  public text: string = '';
  
  public show(): void {
    this.text = 'hello';
  }
}

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