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:
export class AppComponent {
public text: string = '';
}
Vamos exibir nossa propriedade em alguma tag:
<div>
{{ text }}
</div>
Agora vamos criar um botão que, ao ser clicado, chamará um método da classe:
<button (click)="show()">
show
</button>
Neste método, vamos alterar o texto:
export 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.
Crie uma div e dois botões. Faça com que ao clicar no primeiro botão, um texto apareça na div, e ao clicar no segundo botão, outro texto apareça.
