Improve this Doc View Source

The `ngIf` directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to `ngIf` evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

`ngIf` differs from `ngShow` and `ngHide` in that `ngIf` completely removes and recreates the element in the DOM rather than changing its visibility via the `display` css property. A common case when this difference is significant is when using css selectors that rely on an element's position within the DOM, such as the `:first-child` or `:last-child` pseudo-classes.

Note that when an element is removed using `ngIf` its scope is destroyed and a new scope is created when the element is restored. The scope created within `ngIf` inherits from its parent scope using prototypal inheritance. An important implication of this is if `ngModel` is used within `ngIf` to bind to a javascript primitive defined in the parent scope. In this case any modifications made to the variable within the child scope will override (hide) the value in the parent scope.

Also, `ngIf` recreates elements using their compiled state. An example of this behavior is if an element's class attribute is directly modified after it's compiled, using something like jQuery's `.addClass()` method, and the element is later removed. When `ngIf` recreates the element the added class will be lost because the original compiled state is used to regenerate the element.

Additionally, you can provide animations via the `ngAnimate` module to animate the `enter` and `leave` effects.

## Directive Info

- This directive creates new scope.
- This directive executes at priority level 600.
- This directive can be used as multiElement

## Usage

- as attribute:

      <ANY
        ng-if="expression">
      ...
      </ANY>

## Animations

enter - happens just after the `ngIf` contents change and a new DOM element is created and injected into the `ngIf` container leave - happens just before the `ngIf` contents are removed from the DOM

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

### Arguments

Param | Type | Details
--- | --- | ---
ngIf | expression | If the expression is falsy then the element is removed from the DOM tree. If it is truthy a copy of the compiled element is added to the DOM tree.

## Example

Edit in Plunker

    <label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
    Show when checked:
    <span ng-if="checked" class="animate-if">
      This is removed when the checkbox is unchecked.
    </span>

    .animate-if {
      background:white;
      border:1px solid black;
      padding:10px;
    }

    .animate-if.ng-enter, .animate-if.ng-leave {
      -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    }

    .animate-if.ng-enter,
    .animate-if.ng-leave.ng-leave-active {
      opacity:0;
    }

    .animate-if.ng-leave,
    .animate-if.ng-enter.ng-enter-active {
      opacity:1;
    }