Αντίδραση στο Angular

Σε οποιεσδήποτε αλλαγές στις δημόσιες ιδιότητες, το πρότυπο θα αντιδρά αντιδραστικά, δηλαδή θα αλλάζει αμέσως. Έτσι λειτουργεί η αντιδραστικότητα στο Angular.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε μια ιδιότητα που περιέχει κείμενο:

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

Ας εμφανίσουμε την ιδιότητα μας σε κάποια ετικέτα:

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

Τώρα ας φτιάξουμε ένα κουμπί, upon click στο οποίο θα καλείται μια μέθοδος της κλάσης:

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

Σε αυτή τη μέθοδο, ας αλλάξουμε το κείμενο:

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

Τώρα, εάν εκτελέσετε τον κώδικα και πατήσετε το κουμπί, το κείμενο στο div θα αλλάξει αμέσως μετά το πάτημα.

Φτιάξτε ένα div και δύο κουμπιά. Ρυθμίστε τα πράγματα έτσι ώστε, όταν πατηθεί το πρώτο κουμπί, ένα κείμενο να εμφανίζεται στο div, και όταν πατηθεί το δεύτερο - ένα διαφορετικό κείμενο.