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:
export class AppComponent {
public text: string = '';
}
Laten we onze eigenschap weergeven in een tag:
<div>
{{ text }}
</div>
Laten we nu een knop maken, waar bij een klik een methode van de klasse wordt aangeroepen:
<button (click)="show()">
show
</button>
In deze methode veranderen we de tekst:
export 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.
Maak een div en twee knoppen. Zorg ervoor dat bij het klikken op de eerste knop in de div de ene tekst verschijnt, en bij het klikken op de tweede - de andere tekst.
