Reatividade no Angular

Qualquer alteração em propriedades públicas fará com que o template reaja de forma reativa, ou seja, mude instantaneamente. É assim que a reatividade funciona no Angular.

Vamos ver um exemplo. Suponha que temos uma propriedade contendo um texto:

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

Vamos exibir nossa propriedade em alguma tag:

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

Agora vamos criar um botão que, ao ser clicado, chamará um método da classe:

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

Neste método, vamos alterar o texto:

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

Agora, se executarmos o código e clicarmos no botão, o texto na div mudará imediatamente após o clique.