Stiilide dünaamiline muutmine Angularis

Direktiivide ngClass ja ngStyle abil saab elementidele seostada avaldisi, tänu millele meie stiilid muutuvad dünaamiliselt.

Teeme nii, et tekst peidetaks või kuvataks komponendi klassi omaduse active abil:

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

Selleks kirjutame funktsiooni toggle, mis vaheldumisi lülitab selle omaduse sisse või välja:

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

Komponendi CSS-failis määrame järgmise stiili klassile:

.hidden {
	display: none;
}

Komponendi mallis teeme div-i ja lisame sellele CSS-klassi hidden, mis lülitub sisse või välja sõltuvalt komponendi klassi omadusest active:

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

Teeme ka nupu, mille vajutamisel kutsutakse välja meetod toggle, kuvades või peites meie komponendi:

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

Antud on kolm plokki. Tehke kolm nuppu, igaüks neist peaks lülitama oma ploki.