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

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

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

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

მაგალითი

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

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

მაგალითი

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

app/app.component.tsexport class AppComponent {
  public value: string = 'red';
}

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

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

მაგალითი

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

app/app.component.tsexport class AppComponent {
  public isActive: boolean = true;
}

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

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

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