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

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


.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 class="panel-body">

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

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. ( = '#fcc')


That would work the same way as answered here:

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

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

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?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.