Reattività in Angular

In caso di qualsiasi modifica alle proprietà pubbliche, il template reagirà reattivamente, cioè cambierà istantaneamente. Ecco come funziona la reattività in Angular.

Diamo un'occhiata a un esempio. Supponiamo di avere una proprietà che contiene del testo:

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

Visualizziamo la nostra proprietà in un tag:

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

Ora creiamo un pulsante, al click del quale verrà chiamato un metodo della classe:

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

In questo metodo cambiamo il testo:

export class AppComponent {
	public text: string = '';
	
	public show(): void {
		this.text = 'hello';
	}
}

Ora, se avvii il codice e premi il pulsante, il testo nel div cambierà immediatamente dopo il click.

Crea un div e due pulsanti. Fai in modo che cliccando sul primo pulsante nel div apppaia un testo, e cliccando sul secondo - un altro testo.