Reaktivitet i Angular

Ved enhver endring av offentlige egenskaper, vil malen reagere reaktivt, det vil si endre seg umiddelbart. Slik fungerer reaktivitet i Angular.

La oss se på et eksempel. La oss si at vi har en egenskap som inneholder tekst:

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

La oss vise egenskapen vår i en tagg:

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

La oss nå lage en knapp, hvor et klikk vil kalle en metode i klassen:

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

I denne metoden endrer vi teksten:

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

Nå, hvis du starter koden og klikker på knappen, vil teksten i div-en endre seg umiddelbart etter klikket.