Difference Between ng-if And ng-show In AngularJS

In AngularJS both the directives (i.e. ng-If and ng-show) seems to work similar. But they have a uniqueness in the way they render the HTML DOM of the page. In case of ng-if if the {expression} provided turns false then the element is completely removed off from the DOM tree whereas in case of ng-show it will just add a new class to the element to hide that element on the page. To demonstrate this let’s consider a scenario where we wanted to accept personName and personAge from the user. We need to apply some validations on personAge, the following are the validation rules.

Validation Rules:

1. If the Age < 18 then we would like to display message to the user that the “Age must be > 18 years”.
   
   
2. If the Age >18 & Age <100 then we would like to display “Valid Age” message to the user.
   
   
3. If the Age >100 then display message “Age must be between 18 and 100”.

For demonstrating this I am using ASP.NET Mvc4, BootStrap, jQuery and AngularJS.

Step 1: To load bootstrap and AngularJS.

For this, I’ve added the CDN path reference of these files in _Layout.cshtml file.

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
<script src="https://code.AngularJS.org/1.4.0/angular.min.js" type="text/javascript"></script>

Step 2: Define AngularJS Controller for the page.

For this I’ve added a new script file with the name “Home.js” inside the “~/Script/app” folder. The following is the code snippet of the “Home.js”.

var myApp = angular.module("myApp", []);
myApp.controller("homeController", ["$scope", function($scope) {

    $scope.Person = {
        personName: "",
        personAge: 0
    }
}]);

As you can see from the above code I’ve created a new Person object in scope context with two properties i.e. personName and personAge initially set to nothing.

Step 3: Referencing the Home.js file to the Index.cshtml file.

<script src="~/Scripts/app/Home.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>AngularJS Examples</h1>
            <div ng-app="myApp" style="width:400px;">
                <div ng-controller="homeController">
                    <table class="table table-striped table-bordered">
                        <tbody>
                            <tr>
                                <td>Person Name:</td>
                                <td>
                                    <input type="text" ng-model="Person.personName" />
                                </td>
                            </tr>
                            <tr>
                                <td>Person Age:</td>
                                <td>
                                    <input type="text" ng-model="Person.personAge" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center">
                                    <div class="alert alert-info" ng-if="Person.personAge < 18">
                                        Person Age must be <strong>above 18 years.</strong>
                                    </div>
                                    <div class="alert alert-success" ng-if="Person.personAge >= 18 && Person.personAge <= 100">
                                        <strong>Valid Age.</strong>
                                    </div>
                                    <div ng-if="Person.personAge > 100" class="alert alert-warning">
                                        Person Age must be <strong> between 18 and 100.</strong>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

From the above cshtml file code we can state that there are 3 divs in which our 3 different rules are been applied and depending on the input provided, message from the respective div would be displayed on the page. Just save your code and run the application.



Once you run your application you’ll see the above snapshot, since we've set the person age to zero by default. This is the reason why we're getting the above message. From our 1st dive, now press F12 and see what output AngularJS has rendered.



From the above snapshot we can find that only the div whose condition got satisfied has been rendered by AngularJS and rest div element entry has been removed off from the HTML DOM. Now if you put the age of the person as 18 then you’ll be able to see 2nd div been rendered and the 1st & 3rd div entry would be removed off from the HTML DOM.

Now let’s try to achieve the same thing using ng-show. Here we’ll just replaced the ng-if to ng-show in the Index.cshtml file. Here is the changed piece of code.

<tr>
    <td colspan="2" align="center">
        <div class="alert alert-info" ng-show="Person.personAge < 18">
            Person Age must be <strong>above 18 years.</strong>
        </div>
        <div class="alert alert-success" ng-show="Person.personAge >= 18 && Person.personAge <= 100">
            <strong>Valid Age.</strong>
        </div>
        <div ng-show="Person.personAge > 100" class="alert alert-warning">
            Person Age must be <strong> between 18 and 100.</strong>
        </div>
    </td>
</tr>

Run the application and press F12 and here is the rendered output.



From the above snapshot we can say that in case of ng-show whichever div condition got satisfied that div’s data displayed on the page. But for those div’s whose expression didn’t matched they are still present in the HTML DOM but just a new class has been applied on the div element with the name “ng-hide” which hides the element from being displayed on the web page.