ng-show/ng-hide and ng-if are directives of angularjs which are used to check if an expression is true or false and after checking the expression, it shows /hides or removes/recreates the DOM element.

Though the visual effect of both directives are same, the DOM functionality is completely different.

Here is the functionality of both directives

ng-show/ng-hide: - It does not remove the element from DOM. It only hides or shows the element in DOM. To show an element, it removes ng-hide css from the element and to hide the element, it adds the ng-hide class on element. The scope of the element will remain intact when we use ng-hide/ng-show. Here are few examples of these directives

Syntax

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

Use

<div ng-show="showDiv">

In the above example, the div will only appear when the showDiv scope variable value will be true otherwise ng-hide css will be added to the div and div will not appear on DOM

<element ng-hide="expression"></element>

Use

<div ng-hide="hideDiv">

In the above example, the div will only appear when the hideDiv scope variable value will be true otherwise ng-hide css will be removed from div and div will appear on DOM

ng-if: - ng-if creates or removes an element from DOM on basis of an expression. It creates/removes the child scope of the element on basis of the value of expression. Since it creates/removes the element completely from the DOM, the child scope of the element is also recreated/removed.

Syntax

<element ng-if="expression"></element>

Use

<div ng-if="showDiv">

In the above example, the div will only appear when the showDiv scope variable value will be true otherwise div will be removed from DOM.