<a href='https://github.com/angular/angular.js/edit/v1.6.x/src/ng/directive/ngShowHide.js?message=docs(ngShow)%3A%20describe%20your%20change...#L5' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>



<a href='https://github.com/angular/angular.js/tree/v1.6.6/src/ng/directive/ngShowHide.js#L5' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>


<header class="api-profile-header">
  <h1 class="api-profile-header-heading">ngShow</h1>
  <ol class="api-profile-header-structure naked-list step-list">
    
    <li>
      - directive in module <a href="api/ng">ng</a>
    </li>
  </ol>
</header>





<div class="api-profile-description">
  <p>The <code>ngShow</code> directive shows or hides the given HTML element based on the expression provided to
the <code>ngShow</code> attribute.</p>
<p>The element is shown or hidden by removing or adding the <code>.ng-hide</code> CSS class onto the element.
The <code>.ng-hide</code> CSS class is predefined in AngularJS and sets the display style to none (using an
<code>!important</code> flag). For CSP mode please add <code>angular-csp.css</code> to your HTML file (see
<a href="api/ng/directive/ngCsp">ngCsp</a>).</p>
<pre><code class="lang-html">&lt;!-- when $scope.myValue is truthy (element is visible) --&gt;
&lt;div ng-show=&quot;myValue&quot;&gt;&lt;/div&gt;

&lt;!-- when $scope.myValue is falsy (element is hidden) --&gt;
&lt;div ng-show=&quot;myValue&quot; class=&quot;ng-hide&quot;&gt;&lt;/div&gt;
</code></pre>
<p>When the <code>ngShow</code> expression evaluates to a falsy value then the <code>.ng-hide</code> CSS class is added
to the class attribute on the element causing it to become hidden. When truthy, the <code>.ng-hide</code>
CSS class is removed from the element causing the element not to appear hidden.</p>
<h2 id="why-is-important-used-">Why is <code>!important</code> used?</h2>
<p>You may be wondering why <code>!important</code> is used for the <code>.ng-hide</code> CSS class. This is because the
<code>.ng-hide</code> selector can be easily overridden by heavier selectors. For example, something as
simple as changing the display style on a HTML list item would make hidden elements appear
visible. This also becomes a bigger issue when dealing with CSS frameworks.</p>
<p>By using <code>!important</code>, the show and hide behavior will work as expected despite any clash between
CSS selector specificity (when <code>!important</code> isn&#39;t used with any conflicting styles). If a
developer chooses to override the styling to change how to hide an element then it is just a
matter of using <code>!important</code> in their own CSS code.</p>
<h3 id="overriding-ng-hide-">Overriding <code>.ng-hide</code></h3>
<p>By default, the <code>.ng-hide</code> class will style the element with <code>display: none !important</code>. If you
wish to change the hide behavior with <code>ngShow</code>/<code>ngHide</code>, you can simply overwrite the styles for
the <code>.ng-hide</code> CSS class. Note that the selector that needs to be used is actually
<code>.ng-hide:not(.ng-hide-animate)</code> to cope with extra animation classes that can be added.</p>
<pre><code class="lang-css">.ng-hide:not(.ng-hide-animate) {
  /* These are just alternative ways of hiding an element */
  display: block!important;
  position: absolute;
  top: -9999px;
  left: -9999px;
}
</code></pre>
<p>By default you don&#39;t need to override anything in CSS and the animations will work around the
display style.</p>
<h2 id="a-note-about-animations-with-ngshow-">A note about animations with <code>ngShow</code></h2>
<p>Animations in <code>ngShow</code>/<code>ngHide</code> work with the show and hide events that are triggered when the
directive expression is true and false. This system works like the animation system present with
<code>ngClass</code> except that you must also include the <code>!important</code> flag to override the display
property so that the elements are not actually hidden during the animation.</p>
<pre><code class="lang-css">/* A working example can be found at the bottom of this page. */
.my-element.ng-hide-add, .my-element.ng-hide-remove {
  transition: all 0.5s linear;
}

.my-element.ng-hide-add { ... }
.my-element.ng-hide-add.ng-hide-add-active { ... }
.my-element.ng-hide-remove { ... }
.my-element.ng-hide-remove.ng-hide-remove-active { ... }
</code></pre>
<p>Keep in mind that, as of AngularJS version 1.3, there is no need to change the display property
to block during animation states - ngAnimate will automatically handle the style toggling for you.</p>

</div>




<div>
  

  
  <h2>Directive Info</h2>
  <ul>
    
    <li>This directive executes at priority level 0.</li>
    <li>This directive can be used as <a href="api/ng/service/$compile#-multielement-">multiElement</a></li>
  </ul>

  
  <h2 id="usage">Usage</h2>
  <div class="usage">
  
    <ul>
    
      <li>as element:
      <pre><code>&lt;ng-show&#10;  ng-show=&quot;expression&quot;&gt;&#10;...&#10;&lt;/ng-show&gt;</code></pre>
      </li>
    <li>as attribute:
        <pre><code>&lt;ANY&#10;  ng-show=&quot;expression&quot;&gt;&#10;...&#10;&lt;/ANY&gt;</code></pre>
      </li>
    
  </div>
  
<section class="api-section">
  <h3>Arguments</h3>

<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        ngShow
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-expression">expression</a>
      </td>
      <td>
        <p>If the <a href="guide/expression">expression</a> is truthy/falsy then the
                           element is shown/hidden respectively.</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

</section>
  
  <h2 id="animations">Animations</h2>
  <table>
<thead>
<tr>
<th>Animation</th>
<th>Occurs</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="api/ng/service/$animate#addClass">addClass</a> <code>.ng-hide</code></td>
<td>After the <code>ngShow</code> expression evaluates to a non truthy value and just before the contents are set to hidden.</td>
</tr>
<tr>
<td><a href="api/ng/service/$animate#removeClass">removeClass</a> <code>.ng-hide</code></td>
<td>After the <code>ngShow</code> expression evaluates to a truthy value and just before contents are set to visible.</td>
</tr>
</tbody>
</table>

  <a href="api/ngAnimate/service/$animate">Click here</a> to learn more about the steps involved in the animation.

  
  <h2 id="example">Examples</h2><p>A simple example, animating the element&#39;s opacity:</p>
<p>  

<div>
  <plnkr-opener example-path="examples/example-ng-show-simple"></plnkr-opener>

  <div class="runnable-example"
      path="examples/example-ng-show-simple"
      module="ngAnimate"
      deps="angular-animate.js"
      animations="true"
      name="ng-show-simple">

  
    <div class="runnable-example-file" 
      name="index.html"
      language="html"
      type="html">
      <pre><code>Show: &lt;input type=&quot;checkbox&quot; ng-model=&quot;checked&quot; aria-label=&quot;Toggle ngShow&quot;&gt;&lt;br /&gt;&#10;&lt;div class=&quot;check-element animate-show-hide&quot; ng-show=&quot;checked&quot;&gt;&#10;  I show up when your checkbox is checked.&#10;&lt;/div&gt;</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="animations.css"
      language="css"
      type="css">
      <pre><code>.animate-show-hide.ng-hide {&#10;  opacity: 0;&#10;}&#10;&#10;.animate-show-hide.ng-hide-add,&#10;.animate-show-hide.ng-hide-remove {&#10;  transition: all linear 0.5s;&#10;}&#10;&#10;.check-element {&#10;  border: 1px solid black;&#10;  opacity: 1;&#10;  padding: 10px;&#10;}</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="protractor.js"
      type="protractor"
      language="js">
      <pre><code>it(&#39;should check ngShow&#39;, function() {&#10;  var checkbox = element(by.model(&#39;checked&#39;));&#10;  var checkElem = element(by.css(&#39;.check-element&#39;));&#10;&#10;  expect(checkElem.isDisplayed()).toBe(false);&#10;  checkbox.click();&#10;  expect(checkElem.isDisplayed()).toBe(true);&#10;});</code></pre>
    </div>
  

    <iframe class="runnable-example-frame" ng-src="{{getExampleIndex('examples/example-ng-show-simple')}}" name="example-ng-show-simple"></iframe>
  </div>
</div>


</p>
<hr /><p>A more complex example, featuring different show/hide animations:</p>
<p>  

<div>
  <plnkr-opener example-path="examples/example-ng-show-complex"></plnkr-opener>

  <div class="runnable-example"
      path="examples/example-ng-show-complex"
      module="ngAnimate"
      deps="angular-animate.js"
      animations="true"
      name="ng-show-complex">

  
    <div class="runnable-example-file" 
      name="index.html"
      language="html"
      type="html">
      <pre><code>Show: &lt;input type=&quot;checkbox&quot; ng-model=&quot;checked&quot; aria-label=&quot;Toggle ngShow&quot;&gt;&lt;br /&gt;&#10;&lt;div class=&quot;check-element funky-show-hide&quot; ng-show=&quot;checked&quot;&gt;&#10;  I show up when your checkbox is checked.&#10;&lt;/div&gt;</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="animations.css"
      language="css"
      type="css">
      <pre><code>body {&#10;  overflow: hidden;&#10;  perspective: 1000px;&#10;}&#10;&#10;.funky-show-hide.ng-hide-add {&#10;  transform: rotateZ(0);&#10;  transform-origin: right;&#10;  transition: all 0.5s ease-in-out;&#10;}&#10;&#10;.funky-show-hide.ng-hide-add.ng-hide-add-active {&#10;  transform: rotateZ(-135deg);&#10;}&#10;&#10;.funky-show-hide.ng-hide-remove {&#10;  transform: rotateY(90deg);&#10;  transform-origin: left;&#10;  transition: all 0.5s ease;&#10;}&#10;&#10;.funky-show-hide.ng-hide-remove.ng-hide-remove-active {&#10;  transform: rotateY(0);&#10;}&#10;&#10;.check-element {&#10;  border: 1px solid black;&#10;  opacity: 1;&#10;  padding: 10px;&#10;}</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="protractor.js"
      type="protractor"
      language="js">
      <pre><code>it(&#39;should check ngShow&#39;, function() {&#10;  var checkbox = element(by.model(&#39;checked&#39;));&#10;  var checkElem = element(by.css(&#39;.check-element&#39;));&#10;&#10;  expect(checkElem.isDisplayed()).toBe(false);&#10;  checkbox.click();&#10;  expect(checkElem.isDisplayed()).toBe(true);&#10;});</code></pre>
    </div>
  

    <iframe class="runnable-example-frame" ng-src="{{getExampleIndex('examples/example-ng-show-complex')}}" name="example-ng-show-complex"></iframe>
  </div>
</div>


</p>

</div>


