Although ng-if, ng-show/ng-hide looks more or less same but they have different functionality. Both directives have their own element rendering criteria. ng-if remove and recreate the element according to the condition whereas ng-show/ng-hide can be used to show and hide the element.

Introduction

Usage of ng-if and ng-show/ng-hide in angularJS is often misunderstood. They look same but in actual they are not. In this article I will try to explain some basic difference between these directives and will explain where you should use them.

ng-if Vs. ng-show and ng-hide

Let's the differences between these attributes one by one in detail.

ng-if

ng-if will remove elements from the DOM. It removes content from the page. This means that all your handlers or anything else attached to those elements will be lost. You will need to re-attach the handlers and events on DOM element once condition satisfies.

• Remove/Re-Create element from the DOM on the basis of condition.
• Need to re-attach the handlers and events on DOM element.
• Scope is destroyed and new scope is created when the element is restored.
• If you are using a model inside ngIf to bind to a JavaScript primitive (element) defined in the parent scope, any modifications made to the variable within the child or parent scope will not affect the value in other's scope (Will discuss this later).
• ng-if directive has highest priority of all other angular directives. It means it will run first before all other, lower prioritised, directives.

Application acts faster when using ng-if as compared to ng-show/ng-hide because of remove/re-create element functionality.

If you are using ng-if in parent child relation, you should use $parentto get the model value in child element.

<input type="text" ng-model="Age">
<div ng-if="true">
    <input type="text" ng-model="$parent.Age">
</div>

ng-show/ng-hide

ng-show/ng-hide does not remove the elements from DOM. It uses CSS styles to show/hide DOM elements.

• Does not remove the elements from DOM.
• It uses CSS styles internally to show/hide DOM elements.
• Any handlers/events that were attached to child element will not be lost.
• The element is shown or hide by removing or adding the .ng-hide CSS class defined in angularJS library.
• Use ng-show/ng-hide when use are frequently showing/hiding element.
• You can override ng-hide class with your class defined.

<!-- element is visible if model Age is equal to 18 -->
<div ng-show="Age==18"></div>

<!-- element will hide if Age is less than 18-->
<div ng-hide="Age<18"></div>

If you are showing/hiding element very frequently, please don't use ng-if. You should use ng-show/ng-hide instead. For rest you can use ng-if effectively.

Scope sharing: Example

In above paragraph while discussing ng-if I stated that If you are using a model inside ngIf to bind to a JavaScript primitive (element) defined in the parent scope, any modifications made to the variable within the child scope or parent scope will not affect the value for other. See my points below first.

• If you are using ng-show, it can share scope between child and parent scope.
• If you are using ng-if, by default it will not share scope between child and parent.
• To enable sharing you must use $parent with model in your child element.

Now let's see this with a simple example. First consider ng-show directive. in below example I have taken two input element where I have put one out of div and one inside the div element. Now I decorated div element by ng-show attribute. Both input tags are using a model say MyModel. Now if enter something in parent input element (input outside div) or in child input element (inside div element), value will reflect in other input element. See the code below.

<input type="text" ng-model="MyModel" />
<div ng-show="true">
      ng-show example: <input type="text" ng-model="MyModel" />
</div>

Now in my next example I will just replace ng-show with ng-if directive. Now if enter something in parent input element or in child input element , value will not reflect in other input element. See the code below.

<input type="text" ng-model="MyModel" />
<div ng-if="true">
      ng-if example: <input type="text" ng-model="MyModel" />
</div>

To enable sharing model in above code simply use $parent.MyModel in child input element and it will start reflecting changes. See the code below.

<input type="text" ng-model="MyModel" />
<div ng-if="true">
     ng-if example: <input type="text" ng-model="$parent.MyModel" />
</div>

Hope it is giving clear picture about these attributes and this can help you. Please like and rate the article. And don't forget to comment your views and suggestions. It always helps us to improve better.