AngularJS ng-show and ng-hide Directives

AngularJS ng-show and ng-hide Directives

In this tutorial we will see, how we can use AngularJS ng-show and ng-hide Directives to show and hide the elements.


The ng-show directive shows the specified HTML element if the expression evaluates to true, otherwise the HTML element is hidden.
The ng-show directive shows or hides the given HTML element based on the expression provided to the ng-show attribute.



The ng-Hide directive shows or hides the given HTML element based on the expression provided to the ng-Hide attribute.
The ng-Hide directive hides the HTML element if the expression evaluates to true.
ng-Hide is also a predefined CSS class in AngularJS, and sets the element’s display to none.

Syntax for ng-show and ng-hide
<!-- ng-show syntax -->

<element ng-show="expression"> </element>

<!-- ======================================= -->

<!-- ng-hide syntax -->

<element ng-hide="expression"> </element>

<!-- When used as a CSS class: -->

<element class="ng-hide"> </element>


To work with either ngShow or ngHide, just add the directive to the element which you like to show or hide.

<!-- BOOLEAN VALUES =============================== -->
<!-- True Values -->
<div ng-show="sad">this is a emotional quote</div>   

 <!-- can also show if a value is false  --> 
<div ng-show="!sad">this is a funny quote</div> 
<!-- Where !sad means : not sad-->

<!-- FOR EXPRESSIONS =============================== -->
<!-- show if the appState variable is a string of emotional -->
<div ng-show="appState == 'emotional'">this is a emotional quote</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 sad or emotional variables different number ways.


Lets us see some examples and demo related to the AngularJS directives i.e ng-show & ng-hide


let’s first set up the angular dependencies and the markup page.

<style src="style.css" > </style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script> var app = angular.module('myApp', ['ngAnimate']); </script>
<body ng-app="myApp">

<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div class="msg" ng-hide="myCheck"> If You Click I Will Be Hiding. </div>

Putting some style to see the working of the angular directives !


div {
  transition: all linear 0.5s;
  background-color: #5fc8e8;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  left: 200px;
About This Author

Hi This Is Rehmaanali. Blogging Is Just A Hobby. Graduate In Bsc Computer Science

1 Comment

You can post comments in this post.

  • Nice article thank you. it is very usefull information

    atozexams 1 month ago Reply

Post A Reply