Overview

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute.

The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angular-csp.css to your HTML file (see ngCsp).

<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="myValue"></div>

<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="myValue" class="ng-hide"></div>

When the ngShow expression evaluates to a falsy value then the .ng-hide CSS class is added to the class attribute on the element causing it to become hidden. When truthy, the .ng-hide CSS class is removed from the element causing the element not to appear hidden.

Why is `!important` used?

You may be wondering why !important is used for the .ng-hide CSS class. This is because the .ng-hide 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.

By using !important, the show and hide behavior will work as expected despite any clash between CSS selector specificity (when !important isn'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 !important in their own CSS code.

Overriding `.ng-hide`

By default, the .ng-hide class will style the element with display: none !important. If you wish to change the hide behavior with ngShow/ngHide, you can simply overwrite the styles for the .ng-hide CSS class. Note that the selector that needs to be used is actually .ng-hide:not(.ng-hide-animate) to cope with extra animation classes that can be added.

.ng-hide:not(.ng-hide-animate) {
  /* These are just alternative ways of hiding an element */
  display: block!important;
  position: absolute;
  top: -9999px;
  left: -9999px;
}

By default you don't need to override anything in CSS and the animations will work around the display style.

Known Issues

Flickering when using ngShow to toggle between elements

When using ngShow and / or ngHide to toggle between elements, it can happen that both the element to show and the element to hide are visible for a very short time.

This usually happens when the ngAnimate module is included, but no actual animations are defined for ngShow / ngHide. Internet Explorer is affected more often than other browsers.

There are several way to mitigate this problem:

Disable animations on the affected elements.
Use ngIf or ngSwitch instead of ngShow / ngHide.
Use the special CSS selector ng-hide.ng-hide-animate to set {display: none} or similar on the affected elements.
Use ng-class="{'ng-hide': expression} instead of instead of ngShow / ngHide.
Define an animation on the affected elements.

Directive Info

This directive executes at priority level 0.
This directive can be used as multiElement

Usage

as element:

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

as attribute:
```
<ANY
  ng-show="expression">
...
</ANY>
```

Arguments

Param	Type	Details
ngShow	expression	If the expression is truthy/falsy then the element is shown/hidden respectively.

Animations

Animation	Occurs
addClass `.ng-hide`	After the `ngShow` expression evaluates to a non truthy value and just before the contents are set to hidden.
removeClass `.ng-hide`	After the `ngShow` expression evaluates to a truthy value and just before contents are set to visible.

Animations in ngShow/ngHide 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 ngClass except that you must also include the !important flag to override the display property so that the elements are not actually hidden during the animation.

/* 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 { ... }

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.

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

Examples

A simple example, animating the element's opacity:

Show: <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"><br />
<div class="check-element animate-show-hide" ng-show="checked">
  I show up when your checkbox is checked.
</div>

.animate-show-hide.ng-hide {
  opacity: 0;
}

.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
  transition: all linear 0.5s;
}

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

it('should check ngShow', function() {
  var checkbox = element(by.model('checked'));
  var checkElem = element(by.css('.check-element'));

  expect(checkElem.isDisplayed()).toBe(false);
  checkbox.click();
  expect(checkElem.isDisplayed()).toBe(true);
});

A more complex example, featuring different show/hide animations:

Show: <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"><br />
<div class="check-element funky-show-hide" ng-show="checked">
  I show up when your checkbox is checked.
</div>

body {
  overflow: hidden;
  perspective: 1000px;
}

.funky-show-hide.ng-hide-add {
  transform: rotateZ(0);
  transform-origin: right;
  transition: all 0.5s ease-in-out;
}

.funky-show-hide.ng-hide-add.ng-hide-add-active {
  transform: rotateZ(-135deg);
}

.funky-show-hide.ng-hide-remove {
  transform: rotateY(90deg);
  transform-origin: left;
  transition: all 0.5s ease;
}

.funky-show-hide.ng-hide-remove.ng-hide-remove-active {
  transform: rotateY(0);
}

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

it('should check ngShow', function() {
  var checkbox = element(by.model('checked'));
  var checkElem = element(by.css('.check-element'));

  expect(checkElem.isDisplayed()).toBe(false);
  checkbox.click();
  expect(checkElem.isDisplayed()).toBe(true);
});