CSS siniflarinin Angulyarda baglanmasi

Angulyarda CSS sinifinin blok ucun tetbiq edilmesini aktivlesdirmek ve ya deaktivlesdirmek olar. Bu, asagidaki formatda yazilmish teq atributu vasitesile edilir:

[class.sinif_adi]="true ve ya false"

Praktikada baxaq. Ferez edek ki, bizim asagidaki siniflerimiz var:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Gelin numuneler uzerinde bu siniflerin blok ucun necə aktiv ve ya deaktiv edileceyine baxaq.

Numune

Bir sinifi aktivlesdirek, digerini ise deaktivlesdirek:

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

Numune

Ferez edek ki, siniflerin veziyyetleri sinifin xasselerinde saxlanilir:

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

Sinifin gorunurluyunu oz xasselerimizin deyerlerinden asili olaraq baglayaq:

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

Praktiki tapshiriqlar

Asagidaki CSS sinifi verilmishdir:

.hidden {
	visibility: hidden;
}

Bu sinifi bloka baglayin. Klikledikde blokun gizlenecəyi ve ya gosterileceyi bir duyme hazirlayin.