Changing background color in angular application

Question

I am working on an angular application. I have a css class in div which has general properties like font, padding, background-color etc. html code is something like this.

<div class="myCss">
  //my code
</div>

in CSS file, have css like this

div.myCss {
 color: white;
 font-size: 23px;
 background-color: yellow;
}

For a certain condition, I need to change background-color. If myFlag is true, I want background-color to be black, otherwise yellow. I tried using ngClass, but in that when myFlag == true I need to write the whole css just to change background-color. Is there is any way, I can only change background-color on the basis of flag instead of making a new css class with exact same properties as previous one's just with background color change.

I have table in html as follows:
1 2 3 4 5

and in css class I have following css:

table th {
    border-collapse: collapse;
    color: white;
    background-color: #002BA4;
    padding: 3px 4px 3px 4px;
}

For the same flag, I want to change background-color of this th too. How I can do this?

Code editor not showing table as mentioned in point 2. Table looks something like this. <tr class="myCss2"> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> </tr> — user14028818
– user14028818, Commented Aug 21, 2020 at 16:54
This is what you're looking for: pluralsight.com/guides/attribute-class-style-bindings-angular — Mosia Thabo
– Mosia Thabo, Commented Aug 21, 2020 at 17:02
Does this answer your question? unable to change the background color in Angular using style binding — Mosia Thabo
– Mosia Thabo, Commented Aug 21, 2020 at 17:14

Mosia Thabo · Accepted Answer · 2020-08-21 17:13:44Z

2

There're two ways you could approach this:

Option 1

Create a variable to store the style, for example, this will allow you to be able to use this variable multiple times in your template.

let color = myFlag? 'black' : 'yellow';

then in your template, you can do this:

<div [className]="color"></div>

However, this only set the class name so you still need to style those classes.

.black{
   background-color: black;
}

.yellow{
   background-color: yellow;
}

Option 2

You could use style binding like this:

<div [style.backgroundColor]="!myFlag ? 'yellow': 'black'" ></div>

this option will require you to write the same thing in the case where you'll be wishing to change the background-color.

answered Aug 21, 2020 at 17:13

Mosia Thabo

4,2871 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jasdeep Singh · Accepted Answer · 2020-08-21 17:16:13Z

0

<div class="myCss" [style.background-color]="getBackgroundColor()"> 
  //my code
</div>

<th [style.background-color]="getBackgroundColor()">1</th>

Please use the style attribute on div using your myFlag attribute

TS Code: getBackgroundColor() { return this.myFlag ? 'black': 'yellow'; }

edited Aug 21, 2020 at 17:16

answered Aug 21, 2020 at 16:58

Jasdeep Singh

8,3411 gold badge17 silver badges31 bronze badges

2 Comments

user14028818 Over a year ago

thanks and what I can do for that table scenario, I mentioned in question. Any Idea?

Jasdeep Singh Over a year ago

you can do the same for <th> as well. Create a method in TS and use it in a template. I have updated my code accordingly.

Collectives™ on Stack Overflow

Changing background color in angular application

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related