Angular-da CSS synplarynyň baglanyşygy

Angular-da CSS synpynyň ulanylyşyny açyp ýapmak mümkin. Bu iş aşakdaky formatda ýazylan teg atributy arkaly amala aşyrylýar:

[class.synp_ady]="dogry ýa-da ýalňyş"

Amalyýetde göreliň. Bizde aşakdaky synplar bar diýeliň:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Bu synplaryň blok üçin nädip açylýandygy we ýapylýandygy barada mysallara serediň.

Mysal

Bir synpy açalyň we beýlekesini ýapalyň:

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

Synplaryň ýagdaýlary klas ýalykda saklanylýar diýeliň:

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

Synpyň görünmekligini öz ýalyklarymyzyň bahalaryna görä baglalyň:

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

Aşakdaky CSS synpy berlen:

.hidden {
	visibility: hidden;
}

Bu synpy bloka baglaň. Basylanda blok gizlenýän ýa-da görkezilýän düwmäni düzüň.