When to favor ng-if vs. ng-show/ng-hide?

by

Depends on your use case but to summarise the difference:

  1. ng-if will remove elements from DOM. This means that all your handlers or anything else attached to those elements will be lost. For example, if you bound a click handler to one of child elements, when ng-if evaluates to false, that element will be removed from DOM and your click handler will not work any more, even after ng-if later evaluates to true and displays the element. You will need to reattach the handler.
  2. ng-show/ng-hide does not remove the elements from DOM. It uses CSS styles to hide/show elements (note: you might need to add your own classes). This way your handlers that were attached to children will not be lost.
  3. ng-if creates a child scope while ng-show/ng-hide does not

Elements that are not in the DOM have less performance impact and your web app might appear to be faster when using ng-if compared to ng-show/ng-hide. In my experience, the difference is negligible. Animations are possible when using both ng-show/ng-hide and ng-if, with examples for both in the Angular documentation.

Ultimately, the question you need to answer is whether you can remove element from DOM or not?

More Related Contents:

  1. What is the difference between ‘@’ and ‘=’ in directive scope in AngularJS?
  2. angular ng-bind-html and directive within it
  3. How to access parent scope from within a custom directive *with own scope* in AngularJS?
  4. Angular directives – when and how to use compile, controller, pre-link and post-link [closed]
  5. AngularJS ng-style with a conditional expression
  6. Rendering directives within $sce.trustAsHtml
  7. How to allow only a number (digits and decimal point) to be typed in an input?
  8. How to autocapitalize the first character in an input field in AngularJS?
  9. How to understand the `terminal` of directive?
  10. How can I test events in angular?
  11. Custom form validation directive to compare two fields
  12. AngularJS : ng-repeat filter when value is greater than
  13. AngularJS Group By Directive without External Dependencies
  14. AngularJS watch DOM change
  15. How do I apply an AngularJS directive based on a class set by ng-class?
  16. $apply vs $digest in directive testing
  17. Binding variables from Service/Factory to Controllers
  18. How to use “ng-repeat” within template of a directive in Angular JS?
  19. AngularJS custom form component / directive using ng-model
  20. How to set the dynamic controller for directives?
  21. Bind class toggle to window scroll event
  22. Angular adds strange options into select element when setting model value
  23. Angular directive for a fallback image
  24. Enable/Disable Anchor Tags using AngularJS
  25. Illegal use of ngTransclude directive in the template
  26. Understanding the transclude option of directive definition?
  27. angularjs text area character counter
  28. ng-click doesn’t work within the template of a directive
  29. creating a new directive with angularjs
  30. AngularJS – Directives vs Controllers

Leave a Comment