CSS stilių pririšimas Angular

Angular taip pat galima tiesiogiai pridėti stilius blokui. Tai daroma su tag'o atributo pagalba, parašytu šiame formate:

html[style.styleProperty]="property value"

Be to, CSS savybių pavadinimai, kurie turi brūkšnelį viduje, mūsų atveju bus rašomi camelCase. Pažiūrėkime pavyzdžiais, kaip tai veikia.

Pavyzdys

Nustatykime elemento foną:

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

Pavyzdys

Tarkime, kad turime tam tikrą savybę, kuriame yra fono spalva:

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

Pritaikykime šią savybę kaip reikšmę stiliui:

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

Pavyzdys

Tarkime, kad turime tam tikrą loginę savybę:

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

Pririšime skirtingas CSS reikšmes savybei, priklausomai nuo loginės savybės turinio. Naudokime tam ternarinį operatorių:

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

Praktinės užduotys