Reaktivnost u Angularu

Pri bilo kakvim promenama javnih svojstava, template će reagovati reaktivno, odnosno trenutno se menjati. Tako funkcioniše reaktivnost u Angularu.

Hajde da pogledamo na primeru. Neka imamo svojstvo koje sadrži tekst:

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

Ispisaćemo naše svojstvo u nekom tagu:

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

Sada napravićemo dugme, čijim klikom će se pozivati metoda klase:

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

U ovoj metodi ćemo promeniti tekst:

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

Sada, ako pokrenemo kod i pritisnemo dugme, tekst u div-u će se promeniti odmah nakon pritiska.