Dinamička promena stilova u Angularu

Pomoću direktiva ngClass i ngStyle možemo vezati izraze za elemente, zahvaljujući čemu će se naši stilovi menjati dinamički.

Hajde da napravimo da se tekst skriva ili prikazuje pomoću svojstva active klase komponente:

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

Za ovo napišimo funkciju toggle, koja će naizmenično uključivati ili isključivati ovo svojstvo:

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

U CSS fajlu komponente postavimo sledeći stil klasi:

.hidden {
	display: none;
}

U šablonu komponente napravimo div, i dodajmo mu CSS klasu hidden, koja će se uključivati ili isključivati u zavisnosti od svojstva active iz klase komponente:

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

Napravimo takođe dugme, čijim pritiskom će se pozivati metoda toggle, prikazujući ili skrivajući našu komponentu:

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

Data su tri bloka. Napravite tri dugmeta, svako od kojih će paliti-gasiti svoj blok.