Reaktivitet i Angular

Vid alla ändringar av offentliga egenskaper, kommer mallen att reagera reaktivt, det vill säga omedelbart förändras. Så här fungerar reaktivitet i Angular.

Låt oss titta på ett exempel. Låt oss säga att vi har en egenskap som innehåller text:

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

Låt oss visa vår egenskap i någon tagg:

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

Nu skapar vi en knapp, vid klick på vilken en metod i klassen kommer att anropas:

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

I den här metoden ändrar vi texten:

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

Om du nu startar koden och klickar på knappen, kommer texten i div:en att ändras omedelbart efter klicket.