# `ngHide` ( directive in module `ng` )

## Description

The `ngShow` and `ngHide` directives show or hide a portion of the DOM tree (HTML) conditionally based on "truthy" values evaluated within an {expression}. In other words, if the expression assigned to ngShow evaluates to a true value then the element is set to visible (via `display:block` in css) and if false then the element is set to hidden (so display:none). With ngHide this is the reverse whereas true values cause the element itself to become hidden.

Additionally, you can also provide animations via the ngAnimate attribute to animate the show and hide effects.

## Usage

as attribute

    <ANY ng-hide="{expression}">
       ...
    </ANY>

as class

    <ANY class="ng-hide: {expression};">
       ...
    </ANY>

### Parameters

- `ngHide – {expression} –`

  If the expression is truthy then the element is shown or hidden respectively.

## Example

Click me:

Show: I show up when your checkbox is checked.
Hide: I hide when your checkbox is checked.
.example-show-setup, .example-hide-setup { -webkit-transition:all linear 0.5s; -moz-transition:all linear 0.5s; -ms-transition:all linear 0.5s; -o-transition:all linear 0.5s; transition:all linear 0.5s; }

.example-show-setup { line-height:0; opacity:0; padding:0 10px; } .example-show-start.example-show-start { line-height:20px; opacity:1; padding:10px; border:1px solid black; background:white; }

.example-hide-setup { line-height:20px; opacity:1; padding:10px; border:1px solid black; background:white; } .example-hide-start.example-hide-start { line-height:0; opacity:0; padding:0 10px; }

.check-element { padding:10px; border:1px solid black; background:white; }

it('should check ng-show / ng-hide', function() { expect(element('.doc-example-live .check-element:first:hidden').count()).toEqual(1); expect(element('.doc-example-live .check-element:last:visible').count()).toEqual(1);

     input('checked').check();

     expect(element('.doc-example-live .check-element:first:visible').count()).toEqual(1);
     expect(element('.doc-example-live .check-element:last:hidden').count()).toEqual(1);

});