ng-show (or ng-hide) vs. ng-if

Here’s a fact I have found during my work on a SharePoint add-in with AngularJS, you might have read that ng-show does a similar work as ng-if in case you need to hide or show some markup on your page depending on specific condition, so ng-show and ng-if will both do the work, but with slight difference .. or is it a big difference?

The common thing that’s known about the difference between ng-show and ng-if is that, ng-show and ng-hide both will add the styling to change the display of the element to be “none”, so by changing the css for the element and changing the display property, ng-show will hide or show the element. The difference with ng-if is that it will remove the element itself from the markup if the condition is not met, and will return a clone of this element when the condition is met… But that’s not the only difference as well, and not the important difference..

What caught my attention is a difference that’s related to performance. Imagine you have a  table with many rows in your page, with checkbox that’s when checked will view an image related to the row. The thing is, if you’re using ng-show with an expression that evaluates to true/false, all images will always be downloaded in your browser, but you will not see them as they’re going to be hidden because the checkbox is not checked yet. However, when you use ng-if and it evaluates to false by default because the checkbox is not checked, the image will not be downloaded until you check the checkbox, which will be better for browser’s performance (Imagine if you have a repeating section with 100, if you use ng-show, all images will be downloaded to your browser right away, but if you use ng-if, only images that you check will be downloaded).

I hope this helps someone out there with their Angular work as it helped during the Add-in I was working on!