How To Use NgShow and NgHide

Introduction

Today we’ll be looking at how we can use Angular’s ngShow and ngHide directives to do exactly what the directives sound like they do, show and hide!

What They Do

ngShow and ngHide allow us to display or hide different elements. This helps when creating Angular apps since our single-page applications will most likely have many moving parts that come and go as the state of our application changes.

The great part about these directives is that we don’t have to do any of the showing or hiding ourselves with CSS or JavaScript. It is all handled by good old Angular.

Usage

To use either ngShow or ngHide, just add the directive to the element you’d like to show or hide.

    <!-- FOR BOOLEAN VALUES =============================== -->
    <!-- for true values -->
    <div ng-show="hello">this is a welcome message</div>

     <!-- can also show if a value is false -->
    <div ng-show="!hello">this is a goodbye message</div>

    <!-- FOR EXPRESSIONS =============================== -->
    <!-- show if the appState variable is a string of goodbye -->
    <div ng-show="appState == 'goodbye'">this is a goodbye message</div>

    <!-- FOR FUNCTIONS =============================== -->
    <!-- use a function defined in your controller to evaluate if true or false -->
    <div ng-hide="checkSomething()"></div>

Once we have that set in our markup, we can set the hello or goodbye variables in a number of different ways. You could set it in your Angular controller and have the div show or hide when your app loads up.

All of the above can be used for ng-show or ng-hide. This will just hide something if the value, expression, or function returns true.

Using For Boolean Values

See the Pen How To Use ngShow and ngHide by Chris Sevilleja (@sevilayha) on CodePen.

We will create our link that uses ng-click and will toggle the goCats variable to true or false.

    <a href ng-click="goCats = !goCats">Toggle Cats</a>

Then we can show or hide the cats image using ng-show.

    <img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="goCats">

ng-src: We use ng-src for the images so that Angular will instantiate and check to see if the image should be hidden. If we didn’t have this, the image would pop up on site load and then disappear once Angular realized it was supposed to be hidden.

Evaluating Expressions

See the Pen How To Use ngShow and ngHide by Chris Sevilleja (@sevilayha) on CodePen.

Here we evaluate a string coming from our input box. We bind that input box using ng-model to our variable: animal. Depending on what that string is, a different image will show.

We will bind our input box to a variable called animal.

    <input type="text" ng-model="animal">

Then we will use ng-show to evaluate the string.

    <img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="animal == 'cat'">

Using With a Function

See the Pen How To Use ngShow and ngHide by Chris Sevilleja (@sevilayha) on CodePen.

Here we will do a simple check to see if the number entered is even or odd. We will create the function in our AngularJS file:

    // set the default value of our number
    $scope.myNumber = 0;

    // function to evaluate if a number is even
    $scope.isEven = function(value) {

    if (value % 2 == 0)
      return true;
    else
      return false;
    };

Once we have our function, all we have to do is call it using ng-show or ng-hide and pass in our number. By passing in our number through the function, it keeps our Angular controller clean and testable.

    <!-- show if our function evaluates to false -->
    <div ng-show="isEven(myNumber)">
        <h2>The number is even.</h2>
    </div>

    <!-- show if our function evaluates to false -->
    <div ng-show="!isEven(myNumber)">
        <h2>The number is odd.</h2>
    </div>

Conclusion

With these two great directives, we can do great things with our applications. These are simple examples for showing and hiding elements based on booleans, expressions, and functions, but these three can be used to do many different things for your application.

Hopefully, this helps when building great AngularJS based applications. In the future, we’ll be talking about animating ngShow and ngHide to create some great moving applications.