CSS stillərinin Angular-da baglanması

Angular-da həmçinin birbaşa olaraq blok üçün stil əlavə etmək olar. Bu, aşağıdakı formatda yazılmış teq atributu vasitəsilə edilir:

[style.stilXassəsi]="xassənin dəyəri"

Eyni zamanda, daxilində defis olan CSS xassələrinin adları bizim vəziyyətimizde camelCase-də yazılacaq. Gəlin nümunələr üzərində baxaq ki, bu necə işləyir.

Nümunə

Elementə fon təyin edək:

<div [style.backgroundColor]="'blue'">
	text
</div>

Nümunə

Tutaq ki, bizim fon rəngini ehtiva edən müəyyən bir xassəmiz var:

export class AppComponent {
	public value: string = 'red';
}

Gəlin bu xassəni stil üçün dəyər kimi tətbiq edək:

<div [style.backgroundColor]="value">
	text
</div>

Nümunə

Tutaq ki, bizim müəyyən bir məntiqi xassəmiz var:

export class AppComponent {
	public isActive: boolean = true;
}

Məntiqi xassənin məzmunundan asılı olaraq müxtəlif dəyərləri CSS xassəsinə baglayacağıq. Bunun üçün ternar operatorundan istifadə edək:

<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
	text
</div>

Praktiki tapşırıqlar

Blok verilib. Elə edin ki, bloka ilk klik onu qırmızı rəngə boyasın, ikinci klik isə yaşıl rəngə.

Blok verilib. Düymə verilib. Elə edin ki, düyməyə basmaq blokun enini iki dəfə artırsın.