Reactiveiteit in Angular

Bij wijzigingen van publieke eigenschappen, zal de template reactief reageren, dat wil direct veranderen. Zo werkt reactiveiteit in Angular.

Laten we een voorbeeld bekijken. Stel we hebben een eigenschap die tekst bevat:

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

Laten we onze eigenschap weergeven in een tag:

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

Laten we nu een knop maken, waar bij een klik een methode van de klasse wordt aangeroepen:

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

In deze methode veranderen we de tekst:

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

Als we de code nu starten en op de knop drukken, zal de tekst in de div direct na het klikken veranderen.