Stílusok dinamikus módosítása Angularban

Az ngClass és ngStyle direktívákkal kifejezéseket köthetünk az elemekhez, aminek köszönhetően a stílusaink dinamikusan változni fognak.

Tegyük úgy, hogy a szöveg eltűjön vagy megjelenjen a active tulajdonság segítségével a komponens osztályában:

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

Ehhez írjuk meg a toggle függvényt, amely felváltva be- vagy kikapcsolja ezt a tulajdonságot:

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

A komponens CSS fájlában adjuk meg a következő stílust az osztálynak:

.hidden {
	display: none;
}

A komponens template-jében készítsünk egy div-et, és adjunk hozzá egy hidden CSS osztályt, amely be- vagy kikapcsolódik a komponens osztályának active tulajdonságától függően:

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

Készítsünk egy gombot is, amelyre kattintva meghívódik a toggle metódus, megjelenítve vagy elrejtve a komponensünket:

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

Adott három blokk. Készíts három gombot, mindegyik gomb kapcsolja be/ki a saját blokkját.