Dinamično spreminjanje stilov v Angular

Z direktivama ngClass in ngStyle lahko povežemo izraze z elementi, zaradi česar se bodo naši stili spreminjali dinamično.

Naredimo tako, da se bo besedilo skrivalo ali prikazovalo z lastnostjo active razreda komponente:

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

Za to napišimo funkcijo toggle, ki bo izmenično vklopila ali izklopila to lastnost:

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

V CSS datoteki komponente nastavimo naslednji stil razredu:

.hidden {
	display: none;
}

V predlogi komponente naredimo div in dodajmo mu CSS razred hidden, ki se bo vklopil ali izklopil glede na lastnost active iz razreda komponente:

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

Naredimo tudi gumb, ob kliku na katerega se bo poklicala metoda toggle, ki bo prikazala ali skrila našo komponento:

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

Podani so trije bloki. Naredite tri gumbe, vsak od katerih bo preklopil svoj blok.