In AngularJS, ng-show and ng-hide are directives used to control the visibility of elements dynamically based on a condition. These directives add or remove the display: none; CSS property to hide or show elements without removing them from the DOM.
Topics Covered:
- What are
ng-showandng-hide? - Basic Syntax
- Difference Between
ng-showandng-hide - Practical Examples
- Using
ng-showandng-hidewith Checkboxes - Using
ng-showandng-hidewith Buttons - Using
ng-showandng-hidewith Text Input - Performance Considerations
- Alternative:
ng-ifvs.ng-show/ng-hide - Best Practices
- Conclusion
1. What are ng-show and ng-hide?
ng-show: Displays an element if the given expression evaluates to true.
ng-hide: Hides an element if the given expression evaluates to true.
Both work by modifying the CSS property display: none;, but they do not remove the element from the DOM.
2. Basic Syntax
<!-- Using ng-show -->
<div ng-show="isVisible">This text is visible when isVisible is true.</div>
<!-- Using ng-hide -->
<div ng-hide="isHidden">This text is hidden when isHidden is true.</div>
ng-show="isVisible"→ IfisVisibleistrue, the element is visible; otherwise, it is hidden.ng-hide="isHidden"→ IfisHiddenistrue, the element is hidden; otherwise, it is visible.
3. Difference Between ng-show and ng-hide
| Directive | Behavior |
|---|---|
| ng-show | Shows an element when the expression is true. |
| ng-hide | Hides an element when the expression is true. |
Equivalent Expression:
ng-show="condition"is equal tong-hide="!condition".- Example:
<div ng-show="isVisible">Visible</div> <div ng-hide="isVisible">Hidden</div>IfisVisible = true, the first<div>is shown, and the second<div>is hidden.
4. Practical Examples
Example 1: Toggle Visibility Using a Button
<!DOCTYPE html>
<html lang="en">
<head>
<title>ng-show and ng-hide Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainController">
<button ng-click="isVisible = !isVisible">Toggle Text</button>
<p ng-show="isVisible">This text is now visible.</p>
<p ng-hide="isVisible">This text is hidden.</p>
<script>
var app = angular.module("myApp", []);
app.controller("MainController", function($scope) {
$scope.isVisible = true;
});
</script>
</body>
</html>
Explanation:
- Clicking the button toggles the value of
isVisible. ng-showdisplays the paragraph whenisVisibleistrue.ng-hidehides the paragraph whenisVisibleistrue.
5. Using ng-show and ng-hide with Checkboxes
<label><input type="checkbox" ng-model="showDetails"> Show Details</label>
<p ng-show="showDetails">These are additional details.</p>
Explanation:
- The checkbox is bound to
showDetails. - If the checkbox is checked, the paragraph is shown.
- If the checkbox is unchecked, the paragraph is hidden.
6. Using ng-show and ng-hide with Buttons
<button ng-click="showText = true">Show</button>
<button ng-click="showText = false">Hide</button>
<p ng-show="showText">Hello, this text appears when you click "Show".</p>
Explanation:
- Clicking “Show” sets
showText = true, making the paragraph visible. - Clicking “Hide” sets
showText = false, making the paragraph hidden.
7. Using ng-show and ng-hide with Text Input
<input type="text" ng-model="username" placeholder="Enter your name">
<p ng-show="username">Hello, {{ username }}!</p>
Explanation:
- The paragraph appears only when the user types something.
- If
usernameis empty, the paragraph is hidden.
8. Performance Considerations
ng-showandng-hidedo not remove elements from the DOM.- Use
ng-ifinstead if the element should be completely removed for performance optimization.
9. Alternative: ng-if vs. ng-show/ng-hide
| Feature | ng-show/ng-hide | ng-if |
|---|---|---|
| Effect | Adds/removes display: none; | Completely removes/adds the element in the DOM |
| Performance | Slower (element remains in the DOM) | Faster (element is created/destroyed) |
| Use Case | Frequent visibility toggles | Large elements or rarely used elements |
Example:
<p ng-show="condition">This is always in the DOM but may be hidden.</p>
<p ng-if="condition">This is removed from the DOM when hidden.</p>
When to Use ng-if?
✔ When the element contains large content or expensive operations.
✔ When frequent hiding/showing is not required.