Ndryshimi Dinamik i Stileve në Angular

Me ndihmën e direktivave ngClass dhe ngStyle mund të lidhim shprehje në elemente, falë së cilës stilet tona do të ndryshojnë në mënyrë dinamike.

Le ta bëjmë që teksti të fshihet ose të shfaqet duke përdorur vetinë active të klasës së komponentit:

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

Për këtë do të shkruajmë funksionin toggle, i cili në mënyrë alternative do të aktivizojë ose çaktivizojë këtë veti:

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

Në skedarin CSS të komponentit vendosim stilin vijues për klasën:

.hidden {
	display: none;
}

Në template-in e komponentit le të bëjmë një div, dhe t'i shtojmë atij klasën CSS hidden, e cila do të aktivizohet ose çaktivizohet në varësi të vetisë active nga klasa e komponentit:

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

Le të bëjmë gjithashtu një buton, me klikim në të cilin do të thirret metoda toggle, duke shfaqur ose fshehur komponentin tonë:

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

Janë dhënë tre blloqe. Bëni tre butona, secili prej të cilëve do të toggle-ojë bllokun e vet.