Αντίδραση Προϋποθέσεων στο Angular

Η αντίδραση θα λειτουργεί επίσης με τις προϋποθέσεις ngIf. Αυτό σημαίνει ότι μπορούμε να εμφανίζουμε ή να αποκρύπτουμε ένα μπλοκ ανάλογα με το τι περιέχεται στην ιδιότητα της κλάσης.

Ας δοκιμάσουμε στην πράξη. Ας υποθέσουμε ότι έχουμε το ακόλουθο μπλοκ

<div>
	κείμενο
</div>

Ας το εμφανίζουμε ή να το αποκρύπτουμε ανάλογα με μια προϋπόθεση:

<div *ngIf="isShow">
	κείμενο
</div>

Ας φτιάξουμε τώρα δύο κουμπιά. Με κλικ στο πρώτο θα εμφανίζουμε το μπλοκ μας, και με κλικ στο δεύτερο - θα το αποκρύπτουμε:

<button (click)="show()">
	εμφάνιση
</button>
<button (click)="hide()">
	απόκρυψη
</button>

Ας προσθέσουμε στην κλάση του component μια ιδιότητα που θα ρυθμίζει εάν το μπλοκ είναι ορατό ή όχι:

export class AppComponent {
	public isShow: boolean = true;
}

Και τώρα ας γράψουμε την υλοποίηση των μεθόδων μας για εμφάνιση και απόκρυψη του μπλοκ:

export class AppComponent {
	public isShow: boolean = true;
	
	public show(): void {
		this.isShow = true;
	}
	public hide(): void {
		this.isShow = false;
	}
}

Φτιάξτε ένα κουμπί, το πάτημα του οποίου θα εναλλάσσει το μπλοκ: να το εμφανίζει, εάν είναι κρυμμένο, και να το κρύβει, εάν είναι ορατό.