AngularJS: How to use ng-show to hide or reveal elements on click

/ Chris Nielsen

In this article, I will describe how to use the AngularJS directive ng-show for clicking a button to reveal hidden data. The steps below demonstrate how to use AngularJS to hide or reveal data based on clicking an element. In a combination of HTML and JavaScript, it uses AngularJS directives ng-app, ng-controller, ng-click, ng-show, and ng-hide.

The app I will be walking through can be seen on codepen:

See the Pen AngularJS: How to use ng-show to hide or reveal elements on click by Chris Nielsen (@Chris_Nielsen) on CodePen.0

Step 1: AngularJS CDN

To create an AngularJS app, the first thing we will need is an angular.js CDN in the script portion of our HTML document.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

Step 2: Set ng-app in HTML

In the main div container that will house the AngularJS scope, we need to define our app name using the ng-app directive.
For example: ng-app="myApp"

<div class="container" ng-app="myApp" ng-controller="controllerClickToHide">

Step 3: Mirror the app name in the JavaScript

The app name “myApp” that was defined in the HTML div container needs to be mirrored in the JavaScript using the angular.module() syntax shown below:

var app = angular.module('myApp', [])

Step 4: Set ng-controller in HTML

In the same div container where we defined the app name, we also need to set the name of the AngularJS controller for this app using the ng-controller directive. For example:
ng-controller="controllerClickToHide"


Step 5: Define this controller in JavaScript

In the JavaScript portion, we need to use this controller name as the first argument to the AngularJS .controller() function. For example:

.controller('controllerClickToHide', function($scope) {

Step 6: Set up the div in HTML with ng-show

In this step, we will set up the div that contains the hidden data. This is where ng-show should go. ng-show takes in an expression that evaluates to true or false. If the expression evaluates to true, then the element will be displayed. This element has the class name that is defined in the div with ng-show. In this case, it is the class “hidden-data” that will be revealed. If the ng-show evaluates to false, then AngularJS applies an ng-hide class to the element. Here is what the div with the hidden data and ng-show looks like:

<div class="hidden-data" ng-show="reveal">
   This div element will show / hide as you click the button!
</div>

Step 7: Set up the ng-click to toggle hidden data

The ng-show directive is set up to evaluate a variable called “reveal”. The ng-click directive will toggle “reveal” from true to false or from false to true. For example: ng-click="reveal = !reveal"
How this toggle works is, whatever the current value of reveal is (either true or false) reveal = !reveal will flip it to the opposite value.

Summary

When the button is clicked to toggle reveal to false, ng-hide directive is applied to the class hidden-data, which sets the CSS display to none with an !important flag to make the element hidden. For example display: none !important;. When reveal is toggled to true, the ng-hide class is removed, making the hidden data visible.

Note: In order for this functionality to work, both the button div and the hidden content should be contained in the same container div.

Here is the complete code:

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

<div class="container" ng-app="myApp" ng-controller="controllerClickToHide">
    <h1>Demo of ng-show</h1>

      <!-- This is the button div -->
      <div ng-click="reveal = !reveal" class="buttonStyle">
        Show / Hide Information
      </div>
  
This code demonstrates how to use AngularJS to hide or reveal data based on clicking an element. In a combination of HTML and JavaScript, it uses AngularJS directives ng-app, ng-controller, ng-click, ng-show, and ng-hide.
      
      <!-- This is the hidden data div -->
      <div class="hidden-data" ng-show="reveal">
        This div element will show / hide as you click the button!
      </div>
    
</div>

CSS:

.hidden-data {
  background: #3B505E;
  height: auto;
  width: 250px;
  border-radius: 12px;
  padding: 10px;
  font-size: 15px;
  color: #ffffff;  
  margin-top: 15px;
}

.container {
  width: 500px;
}

.buttonStyle {
  background-color: #1565C0;
  color: white;
  border-radius: 8px;
  font-size: 15px;
  padding: 8px;
  width: 180px;
  text-align: center;
  margin-bottom: 15px;
  cursor: pointer;
}

JavaScript:

var app = angular.module('myApp', [])
.controller('controllerClickToHide', function($scope) {
  $scope.reveal = false;
});


Links to more information

ng-app
https://docs.angularjs.org/api/ng/directive/ngApp
angular.module()
https://docs.angularjs.org/api/ng/function/angular.module
ng-controller
https://docs.angularjs.org/api/ng/directive/ngController
ng-click
https://docs.angularjs.org/api/ng/directive/ngClick
ng-show
https://docs.angularjs.org/api/ng/directive/ngShow
ng-hide
https://docs.angularjs.org/api/ng/directive/ngHide