Как связать 8 ди git шестнадцатеричный цвет в angular

Question

У меня есть шестнадцатеричное значение белого

FFFFFF с альфа 50% как # FFFFFF80

Я хочу связать это значение в HTML компоненте как

[style] or [ngStyle]

Результирующее шестнадцатеричное значение будет 8 di git

Answer 1

Вы можете использовать [style.background-color]="background", где background - это некоторое свойство компонента с вашим шестнадцатеричным значением.

component. html

<div [style.background-color]="background">
</div>

component.ts

export class MyComponent {
  background = '#FFFFFF80';
}

ДЕМО: https://stackblitz.com/edit/angular-b21cvn

Answer 2

Существует несколько способов достижения этого с помощью [style] и [ngStyle]

1. Определение цвета непосредственно в шаблоне с помощью [ngStyle]

<span [ngStyle]="{'background-color': '#FFFFFF80'}">
  Background 1
</span>

Определение свойств объекта в компоненте и присвоение ему [ngStyle] в шаблоне

Компонент

backgroundProperties = {
  'background-color': '#FFFFFF80'
};

Шаблон

<span [ngStyle]="backgroundProperties">
  Background 2
</span>

Назначение цвета с использованием [style.background-color]

Компонент

backgroundColor = '#FFFFFF80';

Шаблон

<span [style.background-color]="backgroundColor">
  Background 3
</span>

Рабочий пример: Stackblitz