CSS სტილების მიბმა Angular-ში

Angular-ში ასევე შესაძლებელია ბლოკისთვის პირდაპირ სტილების დამატება. ეს ხდება ტეგის ატრიბუტის მეშვეობით, რომელიც იწერება შემდეგი ფორმატით:

[style.სტილისთვისსაჭირო_თვისება]="თვისების მნიშვნელობა"

ამ შემთხვევაში, CSS თვისებების სახელები, რომლებსაც შიგნით აქვთ დეფისი, ჩვენს შემთხვევაში დაიწერება camelCase-ში. მოდით, მაგალითებით ვნახოთ, როგორ მუშაობს ეს.

მაგალითი

მივანიჭოთ ელემენტს ფონი:

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

მაგალითი

დავუშვათ, გვაქვს გარკვეული თვისება, რომელიც შეიცავს ფონის ფერს:

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

გამოვიყენოთ ეს თვისება, როგორც მნიშვნელობა სტილისთვის:

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

მაგალითი

დავუშვათ, გვაქვს გარკვეული ლოგიკური თვისება:

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

CSS თვისების სხვადასხვა მნიშვნელობას მივაბათ ლოგიკური თვისების შიგთავსიდან გამომდინარე. ამისთვის გამოვიყენოთ ტერნარული ოპერატორი:

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

პრაქტიკული ამოცანები

მოცემულია ბლოკი. გახადეთ ისე, რომ ბლოკზე პირველი დაწკაპუნება გააწითლებს მას, ხოლო მეორე დაწკაპუნება - გაამწვანებს.

მოცემულია ბლოკი. მოცემულია ღილაკი. გახადეთ ისე, რომ ღილაკზე დაწკაპუნება გაზრდის ბლოკის სიგანეს ორჯერ.