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>

Практикалық тапсырмалар