Lidhja e klasave CSS në Angular

Në Angular mund të aktivizosh dhe çaktivizosh aplikimin e një klase CSS për një bllok. Kjo bëhet duke përdorur atributin e etiketës, të shkruar në formatin vijues:

[class.emri_klasës]="true ose false"

Le ta shohim në praktikë. Le të supozojmë që kemi klasat e mëposhtme:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Le të shohim me shembuj se si të aktivizojmë dhe çaktivizojmë këto klasa për një bllok.

Shembull

Le të aktivizojmë një klasë dhe të çaktivizojmë një tjetër:

<div [class.blue]="true" [class.bold]="false">
	text
</div>

Shembull

Le të supozojmë se gjendjet e klasave ruhen në vetitë e klasës:

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

Le të lidhim dukshmërinë e klasës në varësi të vlerave të vetive tona:

<div [class.blue]="isBlue" [class.bold]="isBold">
	text
</div>

Detyra praktike

Është dhënë klasa e mëposhtme CSS:

.hidden {
	visibility: hidden;
}

Lidheni këtë klasë me bllokun. Krijoni një buton, upon clicking on which the block will fshehet ose shfaqet.