Angular 2/4 changing the background color of a panel dynamically

[robin01]

Hi Guys,

Angular 2/4 version

I have a getbootstrap panel-heading with a title and my object is to change the background color of the panel heading based on the color code that comes with the record.

Records are pulled from a database and with each record, depending on the category the record belongs to it also bring with it a color code such as #b94a48. I like to change the panel-heading background-color to reflect the color code that came with the record. for argument sake: category_color: #b94a48.

question, how can i dynamically change the background-color in the css so it can be reflected back to the panel-heading background-color

as of now the color is static, what every i have in the css

CSS:

.panel-default > .panel-heading {
    **background-color: #FFBABA; <!-- change this to  reflect category_color: #b94a48 -->**
    color: #b94a48;
    font-weight: bold;
  }

Part of the HTML

<div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"># {{userDetailTitle}}</h3>
            </div>
            <div class="panel-body">

Angular component.ts
this.userDetailTitle = this.returnArray && this.returnArray[0].userId + ' User Details';

[MartinMuzatko]

Hey there! Not sure if there is a better way, but can you write an inline style with the background-color applied? Not sure how to do that in Angular, but either that, or manually selecting the DOM element and changing the background color would be your choices. (element.style.backgroundColor = '#fcc')

Best,
Martin

[m3g4p0p]

That would work the same way as answered here:

<div class="panel-heading" [style.backgroundColor]="categoryColor">
  ...
</div>

[robin01]

@m3g4p0p

style.backgroundColor

Hi martin,
thanks for the reply back. your answer is very close.

[robin01]

Hi M3g4p0p,

Thanks for the reply back. I tried your suggestion and it works. so is there a way to dynamically update css, just wondering?