Улучшить эту документацию Просмотреть исходный код ngIf

Директива ngIf удаляет или воссоздаёт часть дерева DOM на основе {выражения}. Если выражение, присвоенное ngIf, оценивается как ложное значение, то элемент удаляется из DOM, в противном случае клон элемента вставляется обратно в DOM.

ngIf отличается от ngShow и ngHide тем, что ngIf полностью удаляет и воссоздаёт элемент в DOM вместо изменения его видимости с помощью свойства display css. Типичный случай, когда это различие существенно, — использование CSS-селекторов, которые зависят от расположения элемента в DOM, таких как псевдоклассы :first-child или :last-child.

Обратите внимание, что при удалении элемента с помощью ngIf его область видимости уничтожается, а при восстановлении элемента создаётся новая область видимости. Созданная область видимости в ngIf наследует от родительской области видимости, используя наследование по прототипу. Важное последствие этого заключается в том, что если ngModel используется внутри ngIf, чтобы привязаться к примитиву JavaScript, определённому в родительской области видимости. В этом случае любые изменения, внесённые в переменную в дочерней области видимости, перезапишут (скрывают) значение в родительской области видимости.

Кроме того, ngIf воссоздаёт элементы, используя их состояние компиляции. Примером такого поведения является ситуация, когда атрибут class элемента непосредственно изменяется после его компиляции, например, с помощью метода .addClass() jQuery, а затем элемент удаляется. Когда ngIf воссоздаёт элемент, добавленный класс будет потерян, поскольку для регенерации элемента используется исходное состояние компиляции.

Кроме того, вы можете обеспечить анимацию с помощью модуля ngAnimate для анимирования эффектов enter и leave.