Reaktivitet i Angular

Ved enhver ændring af offentlige egenskaber, vill templaten reagerer reaktivt, det vil sige øjeblikkeligt ændre sig. Sådan fungerer reaktivitet i Angular.

Lad os se på et eksempel. Antag, at vi har en egenskab, der indeholder tekst:

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

Lad os udskrive vores egenskab i et eller andet tag:

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

Lad os nu lave en knap, hvor der ved klik på den vill blive kaldt en metode i klassen:

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

I denne metode vil vi ændre teksten:

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

Hvis du nu kører koden og trykker på knappen, vil teksten i div'en ændre sig umiddelbart efter trykket.