Reactivitatea în Angular

La orice modificare a proprietăților publice, template-ul va reacționa reactiv, adică se va modifica instantaneu. Așa funcționează reactivitatea în Angular.

Să privim un exemplu. Să presupunem că avem o proprietate care conține text:

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

Să afișăm proprietatea noastră într-un tag:

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

Acum să facem un buton, la click pe care va fi apelată o metodă a clasei:

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

În această metodă vom schimba textul:

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

Acum, dacă rulăm codul și apăsăm pe buton, imediat după apăsare se va schimba textul în div.