Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Follow us on LinkedIn for our latest data and tips!
There are a variety of built-in Angular directives for showing and hiding content on a page. Ng-show/ng-hide and ng-if are commonly used directives for doing this. Ng-switch and ng-class could also be used to do this (albeit in different ways). This post will explain how ng-show and ng-if differ in their means of hiding content on a page.
https://embed.plnkr.co/eWQTdAsApBdFmvtD2ZEv/
There are two buttons in this html but only one is showing at a time. Each button has an ng-show directive on it. One button will show if the variable $scope.mute = true and the other if $scope.mute = false. This is because ng-show takes an expression as an attribute. If the expression is truthy, it shows that element on the page (and vice versa). Clicking the button there calls a function muteToggle (using ng-click) which toggles $scope.mute to true or false.
This same example could have been written with ng-hide, but with the true/false expressions reversed.
If you look at the HTML in the chrome developer tools, both buttons are there:
You’ll notice the hidden one is set to display:none;
Watch what happens to this same HTML if you use ng-if (which appeared in Angular 1.2) instead of ng-show.
[iframe src=”https://embed.plnkr.co/EfLFDVCgAEu8Ea66smIU” width=”100%” height=”450″]
Here’s the specific part of interest in the dev tools pane:
Only one button shows up in the HTML now. Just like the directive sounds, that particular element (in this case, a button) will only show up if the expression is true.
Ng-show/hide can show or hide an element on a page. They will still be in the DOM either way. Ng-if determines whether the element is actually added or removed from the DOM.
The potential problem with using ng-show/hide comes from Angular $digest loop. Ng-show can hide something from a user but not from the Angular $digest loop and watches. This can slow down performance if enough things are being watched on a page. By using ng-if, the DOM element will be removed and any watchers or event handlers with it. The major caveat to ng-if is that it brings in its own child scope into the app. Keeping track of scopes can be confusing at times, so be warned about that part of ng-if.
There might be cases when you need to still work with things (like event handlers) that are attached to hidden elements. This would be a use case for ng-show/hide.
But the general rule of thumb here is don’t load/keep anything into the DOM that you don’t need. You should generally use ng-if unless you explicitly need ng-show/hide.
Customized Technical Learning Solutions to Help Attract and Retain Talented Developers
Let DI help you design solutions to onboard, upskill or reskill your software development organization. Fully customized. 100% guaranteed.
DevelopIntelligence leads technical and software development learning programs for Fortune 500 companies. We provide learning solutions for hundreds of thousands of engineers for over 250 global brands.
“I appreciated the instructor’s technique of writing live code examples rather than using fixed slide decks to present the material.”
VMwareDevelopIntelligence has been in the technical/software development learning and training industry for nearly 20 years. We’ve provided learning solutions to more than 48,000 engineers, across 220 organizations worldwide.
Thank you for everyone who joined us this past year to hear about our proven methods of attracting and retaining tech talent.
© 2013 - 2022 DevelopIntelligence LLC - Privacy Policy
Let's review your current tech training programs and we'll help you baseline your success against some of our big industry partners. In this 30-minute meeting, we'll share our data/insights on what's working and what's not.
Training Journal sat down with our CEO for his thoughts on what’s working, and what’s not working.