ng-if vs. ng-show – Which one is better for performance?

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 showMessage is false, the <div> is removed from the DOM.
• If showMessage is true, 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 display CSS 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 changes display: 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