html - How to set color from API response in border-color in Angular?

Question

I am getting categoryColor from API Responce and I had set border-left: 3px solid {{element.categoryColor}} in inline style. It's working fine and no any other issues in development but in Visual Studio appear red in file name as show as below image.

So I want to proper syntax or best practice to apply color in structure using inline style.

Answer 1

Angular have attribute binding which should be used in this case.

If I were you i would move everything from style to some css class then in this span element I would use [style.borderColor]="element.categoryColor"
like so:

.some-class {
    border-left: 3px solid transparent;
    /* ... */
}

<span class="some-class" [style.borderColor]="element.categoryColor"></span>

but you can use it like so as well:

<span style="border-left: 3px solid transparent;" [style.borderColor]="element.categoryColor"></span>

Answer 2

The best way would be using [ngStyle].

<span [ngStyle]="{ 'border-color': getBorderColor() }">Your content</span>

And for bordercolor, you could use a function which gets the color code from the api response and that function should return the css syntax, like 2px solid purple.