'Change the background color of a div in angular

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>

Solution 1:^[1]

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

Reference

Solution 2:^[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	AWE
Solution 2	Community

'Change the background color of a div in angular

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]