Улучшить эту документацию Просмотреть исходный код 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 воссоздаёт элементы используя их состояние компиляции. Примером такого поведения является ситуация, когда атрибут класса элемента изменяется непосредственно после компиляции, используя что-то вроде метода .addClass() jQuery, а затем элемент удаляется. Когда ngIf воссоздаёт элемент, добавленный класс будет утерян, так как используется исходное состояние компиляции для восстановления элемента.

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