Dynamiczna zmiana stylów w Angularze

Za pomocą dyrektyw ngClass i ngStyle można powiązać wyrażenia z elementami, dzięki czemu nasze style będą zmieniać się dynamicznie.

Zróbmy tak, aby tekst ukrywał się lub pokazywał za pomocą właściwości active klasy komponentu:

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

W tym celu napiszmy funkcję toggle, która naprzemiennie będzie włączać lub wyłączać tę właściwość:

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

W pliku CSS komponentu ustawiamy następny styl klasie:

.hidden {
	display: none;
}

W templatce komponentu zróbmy diva i dodajmy mu klasę CSS hidden, która będzie włączana lub wyłączana w zależności od właściwości active z klasy komponentu:

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

Zróbmy również przycisk, po naciśnięciu którego będzie wywoływana metoda toggle, pokazując lub ukrywając nasz komponent:

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

Dane są trzy bloki. Zrób trzy przyciski, każdy z nich będzie przełączał swój blok.