NgShow and NgHide directive in AngularJS

In this post I am going to explain, how we can use  ng-show  &  ng-hide  directives in AngularJS. This is my third blog in AngularJS series.

Now,  ng-show  directive is basically used to show an HTML element if the expression passed in the ng-show attribute is true and  ng-hide  directive just do the opposite of it. So, it will hide an HTML element if the expression passed in the ng-hide attribute is true. So, just to give you a simple example look at the HTML markup below.

<button ng-show="true">Button 1</button>
<button ng-hide="true">Button 2</button>

In the above example, Button 1 will be shown as the expression is a true value and the Button 2 will be hidden since the expression is a true value here too. If we make attribute for both the directives false in the above example, then the opposite thing would happen. This was quite a simple example. Let’s move on to a bit difficult example using code in my previous post named:

Creating a Controller in AngularJS

From my previous post, our  app.js  code where we have our controller named  myController  is like this:-

(function() {
  var obj = {
    name: 'Test Controller',
    result: 100
  };

  var app = angular.module('myModule', []);
  app.controller('myController', function() {
    this.prop = obj;
  });
})();

And our HTML code is like this:-

<!DOCTYPE html>
<html ng-app="myModule">
    
    <head>
        <link rel="stylesheet" href="bootstrap.min.css" type="text/css" />
        <script src="angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    
    <body>
        <div class="well">
             <h3> Object Name</h3>
             <h4> Object Result </h4>
        </div>
    </body>

</html>

Now, we will add one more key to our object  obj  in the app.js file. Let’s name it  isVisible  and assign value  true  to it. So, the object  obj  would be now like this:-

  var obj = {
    name: 'Test Controller',
    result: 100,
    isVisible: true  // <-- new key-value pair added here..
  };

Now our objective here is to add two buttons to our HTML markup and display the 1st button only when  isVisible  value comes out to be  true  and hide the 2nd button when  isVisible  value comes out to be  true . Now, we will achieve this using the  ng-show  &  ng-hide  directives in AngularJS. Let’s add the two buttons to our HTML markup along with the two attribute  ng-show  &  ng-hide . So, our HTML markup will now look like:-

<body ng-controller="myController as controller">
  <div class="well">
    <h3>{{controller.prop.name}}</h3>
    <h4>{{controller.prop.result}}</h4>
    <button ng-show="controller.prop.isVisible">Button 1</button>
    <button ng-hide="controller.prop.isVisible">Button 2</button>
  </div>
</body>

Explanation:-

Here we calling our controller alias named  controller  which we have created in the app.js file and then calling the property that we have added inside our controller named  prop  onto which out main object  obj  is passed and finally calling our newly added key to the object  isVisible . So our full expression comes out to be like:-

controller.prop.isVisible

Since we have set manually  isVisible  as true in our object, that why the 1st button will be shown in our web page and the 2nd button will be hidden as I have already mentioned about it in 2nd paragraph of this blog.

Demo #1:
Working Demo on Plunker

Now, if we just do a small manipulation in our &  ng-hide  attribute expression and just a not sign (!) before the expression, the our 2nd button will start displaying again, since the expression will evaluate to be false now. New markup and the updated demo below:-

<button ng-hide="!controller.prop.isVisible">Button 2</button>

Demo #2:
Working Demo on Plunker

That’s it! If you have any comments or suggestion about this post, I would really appreciate it.
Happy Coding 🙂

Advertisements

One thought on “NgShow and NgHide directive in AngularJS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s