Dynamická zmena štýlov v Angular

Pomocou direktív ngClass a ngStyle je možné viazať výrazy k elementom, vďaka čomu sa naše štýly budu meniť dynamicky.

Urobme tak, aby sa text skrýval alebo zobrazoval pomocou vlastnosti active triedy komponentu:

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

Na to napíšeme funkciu toggle, ktorá bude striedavo zapínať alebo vypínať túto vlastnosť:

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

V CSS súbore komponentu nastavme nasledujúci štýl triede:

.hidden {
	display: none;
}

V template komponentu vytvorme div, a pridajme mu CSS triedu hidden, ktorá sa bude zapínať alebo vypínať v závislosti od vlastnosti active z triedy komponentu:

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

Urobme tiež tlačidlo, po kliknutí na ktoré sa bude volať metóda toggle, zobrazujúc alebo skrývajúc náš komponent:

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

Dané sú tri bloky. Vytvorte tri tlačidlá, každé z nich bude prepínať svoj blok.