Change the background color of a div in angular

Question

I would like to change the bg colour of div when clicked on that particular div. The div is placed in a slider panel. For example, if I click Home, the slider gets hidden and the home panel opens up. Again when I open the slider, the bg colour should be retained to say that I am in Home panel. I tried using ng-style and ng-class, but it doesnt work.

<div class="menu-grid-con all-icons">
  <div class="row">
    <div class="col col-50 text-center" ng-click="menu.onHomeButtonClick()">
      <img src="images/iconHome.png" class="menu-icons">
      <br> <!-- TODO: to change -->
      <p translate="MENU_HOME" class="menu-icon-text"></p>
    </div>
    <div 
      class="col col-50 text-center" 
      ng-click="menu.onFlyerButtonClick()" 
      ng-style={"background-color:blue;} "
    >
      <img src="images/iconWeeklyFlyer.png" class="menu-weekly-flyer-icons">
      <br> <!-- TODO: to change -->
      <p translate="MENU_WEEKLY" class="menu-icon-text"></p>
    </div>
  </div>
</div>

I tried to add ng-class as well.
But bg colour is not reflecting in the div. — kate, Oct 05 '16 at 09:09

score 0 · Answer 1 · edited May 23 '17 at 12:00

0

Your ng-style syntax is wrong.

It should be

ng-style="{'background-color':'blue'}"

Please, note that ng-class take a css class not individual properties

<div ng-class="bgColor"></div>

CSS

.bgColor{
  background-color:blue;
}

There are many different ways to declare ng-class. Take a look here.

This useful SO post talks about different ways to conditionally applying css in AngularJS.

edited May 23 '17 at 12:00

Community

1
1

answered Oct 05 '16 at 09:18

Ravi Teja

1,097
8
13

score 0 · Answer 2 · answered Oct 05 '16 at 09:42

0

ng-style="{'background-color':'#CCCCCC'}">

Reference

answered Oct 05 '16 at 09:42

AWE

213
1
4
12

Change the background color of a div in angular

2 Answers2