text: <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>
  
  
  