Angular'да CSS стилдерин байлоо

Angular'да ошондой эле түздөн-түз блокуга стилдерди кошууга болот. Муну тегдин атрибуту жардамы менен аткарууга болот, ал төмөнкү форматта жазылат:

html[style.styleProperty]="property value"

Бул учурда ичинде сызыкча бар CSS касиеттеринин аталыштары camelCase менен жазылат. Келгиле, бул кантип иштешин мисалдар аркылуу карап чыгалы.

Мисал

Элементке фон коёлу:

app/app.component.html<div [style.backgroundColor]="'blue'">
  текст
</div>

Мисал

Алалы, бизде фон түсүн камтыган белгилүү бир касиет бар:

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

Бул касиетти стилдин мааниси катары колдонолу:

app/app.component.html<div [style.backgroundColor]="value">
  текст
</div>

Мисал

Алалы, бизде белгилүү бир булеан касиети бар:

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

Булеан касиетинин мазмунуна жараша ар кандай CSS маанилерин байланыштыралы. Бул үчүн үч мүчөлүү операторду колдонолу:

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

Практикалык тапшырмалар