Difference Between ng-if And ng-show In AngularJS

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.
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.
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.