Reactividad en Angular
Ante cualquier cambio en las propiedades públicas, la plantilla reaccionará reactivamente, es decir, cambiará instantáneamente. Así funciona la reactividad en Angular.
Veamos un ejemplo. Supongamos que tenemos una propiedad que contiene texto:
export class AppComponent {
public text: string = '';
}
Mostremos nuestra propiedad en alguna etiqueta:
<div>
{{ text }}
</div>
Ahora hagamos un botón, al hacer clic en el cual se llamará un método de la clase:
<button (click)="show()">
show
</button>
En este método, cambiemos el texto:
export class AppComponent {
public text: string = '';
public show(): void {
this.text = 'hello';
}
}
Ahora, si ejecutamos el código y presionamos el botón, el texto en el div cambiará inmediatamente después de hacer clic.
Crea un div y dos botones. Haz que al hacer clic en el primer botón, un texto aparezca en el div, y al hacer clic en el segundo, otro texto.
