Reaktivität in Angular
Bei Änderungen an öffentlichen Eigenschaften reagiert das Template reaktiv, das heißt, es ändert sich sofort. So funktioniert Reaktivität in Angular.
Schauen wir uns ein Beispiel an. Angenommen, wir haben eine Eigenschaft, die Text enthält:
export class AppComponent {
public text: string = '';
}
Geben wir unsere Eigenschaft in einem Tag aus:
<div>
{{ text }}
</div>
Erstellen wir nun einen Button, bei dessen Klick eine Klassenmethode aufgerufen wird:
<button (click)="show()">
show
</button>
In dieser Methode ändern wir den Text:
export class AppComponent {
public text: string = '';
public show(): void {
this.text = 'hello';
}
}
Wenn wir nun den Code starten und auf den Button klicken, ändert sich der Text im div sofort nach dem Klick.
Erstellen Sie ein div und zwei Buttons. Sorgen Sie dafür, dass beim Klick auf den ersten Button ein Text im div erscheint und beim Klick auf den zweiten - ein anderer Text.
