Tyylien dynaaminen muuttaminen Angularissa

ngClass- ja ngStyle-direktiiveilla voidaan sidonta lausekkeita elementteihin, minkä ansiosta tyylimme muuttuvat dynaamisesti.

Tehdään tekstistä niin, että se piilotetaan tai näytetään komponentin luokan active- ominaisuuden avulla:

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

Kirjoitetaan tätä varten toggle-funktio, joka vuorotellen ottaa käyttöön tai poistaa käytöstä kyseisen ominaisuuden:

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

Komponentin CSS-tiedostossa asetetaan seuraava tyyli luokalle:

.hidden {
	display: none;
}

Komponentin templaatissa tehdään div, ja lisätään siihen CSS-luokka hidden, joka otetaan käyttöön tai poistetaan käytöstä riippuen komponentin luokan active-ominaisuudesta:

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

Tehdään myös painike, jota painamalla kutsutaan toggle-metodia, näyttäen tai piilottaen komponenttimme:

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

Annettu kolme lohkoa. Tee kolme painiketta, joista jokainen saa oman lohkonsa vaihtumaan näkyviin/piiloon.