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:

export class AppComponent {
	public text: string = '';
}

Lad os udskrive vores egenskab i et eller andet tag:

<div>
	{{ text }}
</div>

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

<button (click)="show()">
	vis
</button>

I denne metode vil vi ændre teksten:

export 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.

Lav en div og to knapper. Gør sådan, at der ved at klikke på den første knap i div'en kommer den ene tekst, og ved at klikke på den anden - en anden tekst.