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

Improve this doc

## 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-show="{expression}">
       ...
    </ANY>

as class

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

with animations

    //The show and hide animations are supported
    <ANY ng-show="{expression}" ng-animate="{show: 'show-animation', hide: 'hide-animation'}">
       ...
    </ANY>

Click here to learn more about the steps involved in the animation.

### Parameters

- `ngShow – {expression} –`

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

### Animations

- show - happens after the ngShow expression evaluates to a truthy value and the contents are set to visible
- hide - happens before the ngShow expression evaluates to a non truthy value and just before the contents are set to hidden

## Example

#### Source

#### Demo