Tutorial

How To Use NgShow and NgHide

Draft updated on Invalid Date
Default avatar

By Chris on Code

How To Use NgShow and NgHide

This tutorial is out of date and no longer maintained.

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Chris on Code

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel