Dynamická změna stylů v Angular

Pomocí direktiv ngClass a ngStyle lze vázat výrazy k elementům, díky čemuž se naše styly budou měnit dynamicky.

Pojďme udělat tak, aby se text skrýval nebo zobrazoval pomocí vlastnosti active třídy komponenty:

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

K tomu napíšeme funkci toggle, která bude střídavě zapínat nebo vypínat tuto vlastnost:

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

V CSS souboru komponenty nastavíme následující styl třídě:

.hidden {
	display: none;
}

V templatu komponenty uděláme div, a přidáme mu CSS třídu hidden, která se bude zapínat nebo vypínat v závislosti na vlastnosti active z třídy komponenty:

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

Uděláme také tlačítko, po jehož stisknutí bude volána metoda toggle, zobrazující nebo skrývající naši komponentu:

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

Jsou dány tři bloky. Udělejte tři tlačítka, každé z nich bude přepínat svůj blok.