![]()
Both ng-if and ng-show are used to conditionally display elements in AngularJS, but they work differently under the hood. Choosing the right one impacts performance, especially in large applications.
1. Understanding ng-if and ng-show
| Feature | ng-if | ng-show |
|---|---|---|
| Functionality | Adds/removes element from the DOM | Hides/shows element via CSS (display: none;) |
| DOM Manipulation | Destroys and recreates elements when the condition changes | Keeps the element in the DOM but toggles visibility |
| Performance Impact | Better for performance when elements are rarely needed | Faster when toggling frequently, but consumes more memory |
| Use Cases | Best for heavy elements (e.g., complex components, lists) | Best for UI elements that frequently toggle |
2. How ng-if Works (Removes and Recreates DOM Elements)
When the condition in ng-if is false, Angular removes the element from the DOM. When it’s true, Angular recreates it.
✅ Example of ng-if
<div ng-if="showMessage">
<p>This message appears when 'showMessage' is true.</p>
</div>
How it Works Internally
- If
showMessageisfalse, the<div>is removed from the DOM. - If
showMessageistrue, the<div>is added back.
Pros:
✔ Efficient when dealing with large components or lists.
✔ Reduces memory usage when the element is not needed.
Cons:
Expensive when frequently toggled, as it destroys and recreates elements.
3. How ng-show Works (Hides Elements Using CSS)
ng-show keeps the element in the DOM but hides it using CSS (display: none;).
Example of ng-show
<div ng-show="showMessage">
<p>This message is always in the DOM but hidden when 'showMessage' is false.</p>
</div>
How it Works Internally
- The element remains in the DOM at all times.
- AngularJS only toggles the
displayCSS property.
Pros:
✔ Faster when toggling frequently, since it does not remove elements from the DOM.
✔ Good for small UI elements (buttons, notifications).
Cons:
Higher memory usage, since hidden elements still consume resources.
Can slow down large pages if used excessively.
4. Performance Considerations – Which One is Better?
The choice between ng-if and ng-show depends on how often the element is toggled and how complex it is.
| Scenario | Best Choice | Why? |
|---|---|---|
| Large components (tables, lists, forms) | ng-if | Avoids keeping unnecessary elements in memory |
| Frequently toggled elements (buttons, popups, tooltips) | ng-show | Avoids expensive DOM creation/destruction |
| One-time conditional elements | ng-if | No need to keep hidden elements in memory |
| Performance-sensitive UI (real-time apps) | ng-show | Faster toggling without re-rendering |
Rule of Thumb:
✔ Use ng-if for heavy, infrequently used elements.
✔ Use ng-show for lightweight, frequently toggled elements.
5. Performance Test – ng-if vs. ng-show
Let’s measure the time taken to toggle elements using both directives.
Test Setup
<button ng-click="toggle()">Toggle Element</button>
<!-- ng-if version -->
<div ng-if="isVisible">
<p>Heavy component</p>
</div>
<!-- ng-show version -->
<div ng-show="isVisible">
<p>Lightweight component</p>
</div>
JavaScript
$scope.isVisible = false;
$scope.toggle = function() {
$scope.isVisible = !$scope.isVisible;
};
Expected Results
ng-if: Slower toggling because it removes and re-adds elements.ng-show: Faster toggling, since it only changesdisplay: none;.
Conclusion:
- If you need a short-lived component, use
ng-if. - If you need quick toggling, use
ng-show.
6. Summary – When to Use Each Directive
| Use Case | Best Choice |
|---|---|
| Large lists, complex components | ng-if |
| Buttons, popups, small UI elements | ng-show |
| Forms that appear/disappear | ng-if |
| Loading spinners, animations | ng-show |
| Rarely toggled elements | ng-if |
| Frequently toggled elements | ng-show |
