Δυναμική αλλαγή στυλ στο Angular

Με τις οδηγίες ngClass και ngStyle μπορούμε να δέσουμε εκφράσεις σε στοιχεία, χάρη στις οποίες τα στυλ μας θα αλλάζουν δυναμικά.

Ας κάνουμε το κείμενο να εμφανίζεται ή να κρύβεται χρησιμοποιώντας την ιδιότητα active της κλάσης του component:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

Για αυτό, θα γράψουμε τη συνάρτηση toggle, η οποία εναλλάξ θα ενεργοποιεί ή απενεργοποιεί αυτήν την ιδιότητα:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

Στο αρχείο CSS του component ορίζουμε το ακόλουθο στυλ στην κλάση:

.hidden {
	display: none;
}

Στο template του component θα φτιάξουμε ένα div, και θα του προσθέσουμε την CSS κλάση hidden, η οποία θα ενεργοποιείται ή απενεργοποιείται ανάλογα με την ιδιότητα active από την κλάση του component:

<div [ngClass]="{hidden: active}">
	text
</div>

Ας φτιάξουμε επίσης ένα κουμπί, upon click στο οποίο θα καλείται η μέθοδος toggle, εμφανίζοντας ή κρύβοντας το component μας:

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

Δίνονται τρία blocks. Φτιάξτε τρία κουμπιά, καθένα από τα οποία θα εναλλάσσει το δικό του block.