Angular JS Tutorial: Difference between ng-hide and ng-if
It took me a while to even realize that there were two different ways toggle the display of HTML DOM elements with Angular JS — thank you Angular docs for not being nearly as helpful as you were when you had comments. Anyways (rant over), this is a really good thing to know because it will help you use the power of Angular to the fullest.
Ng-Show and Ng-Hide
These are use for when you want to toggle the visibility of a DOM element and that toggle can happen any number of times. This is like add css styles for display. When ng-show is true the css display style is set to block/inline. When ng-show is false the css display style is set to none. Conversely if you use ng-hide instead when ng-hide is set to true display is set to none and when ng-hide is set to false display is set to block/inline. The DOM elements are always present no matter if the content is visible or not.
So, now for a good example using ng-show. Let’s say you only want to show a message to someone once they’ve entered their name:
<label for="nameInput">Enter Your Name:</label>
<input type="text" id="nameInput" ng-model="name" />
<div ng-show="name">
<p>Hello {{name}}, it's nice to meet you!</p>
</div>
This also works using ng-hide, if there’s no name then we don’t want to show our greeting:
<label for="nameInput">Enter Your Name:</label>
<input type="text" id="nameInput" ng-model="name" />
<div ng-hide="!name">
<p>Hello {{name}}, it's nice to meet you!</p>
</div>
Ng-If
So now let’s harness the power of Angular JS. If you have a DOM element that you ONLY want to display/hide once — like say when the page first or view first loads — then this is the option for you. Ng-If either adds or removes the DOM element from the DOM. When Ng-If is true then DOM element will be added to the document tree. When Ng-If is false the DOM element will be completely removed from the document tree. Why is this a good thing? This means your page will load faster because your document tree doesn’t have to render and then hide DOM elements that you’re never going to use.
Let’s pretend we have a data object like containing the first and last name of some famous people. We want to display this information in a table. However the data in our object comes from a query to a database — so we might not always have results to display. This is where Ng-If is really handy. Take a look at this example where if we have no results in our data object then our table HTML will be completely removed from the DOM — therefor making it faster — before angular renders the view:
<div ng-if="data.length > 0">
<h4>Famous People</h4>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Number</th>
<th>Email</th>
</tr>
<tr ng-repeat="person in data">
<td>{{person.firstName}}</td>
<td>{{person.lastName}}</td>
<td>{{person.phone}}</td>
<td>{{person.email}}</td>
</tr>
</table>
</div>
