ng-if is an AngularJS directive used for conditional rendering. Unlike ng-show and ng-hide, which only toggle an element’s visibility using display: none;, ng-if completely removes or adds elements from the DOM based on a given condition. This makes ng-if more efficient when working with large elements or expensive computations.
Topics Covered:
- What is
ng-if? - Basic Syntax
- Difference Between
ng-ifandng-show/ng-hide - Practical Examples
- Using
ng-ifwith Buttons - Using
ng-ifwith Input Fields - Using
ng-ifwith Arrays and Lists - Performance Considerations
- Nested
ng-ifDirectives - Best Practices
- Conclusion
1. What is ng-if?
ng-if conditionally adds or removes elements from the DOM based on an expression.
If the expression evaluates to false, the element is completely removed from the DOM.
If the expression evaluates to true, the element is added back to the DOM.
2. Basic Syntax
<div ng-if="isVisible">This content appears only when isVisible is true.</div>
- When
isVisible = true, the<div>is added to the DOM. - When
isVisible = false, the<div>is removed from the DOM.
3. Difference Between ng-if and ng-show/ng-hide
| Feature | ng-if | ng-show/ng-hide |
|---|---|---|
| Effect | Adds/removes element from DOM | Changes CSS display property |
| Performance | Faster for large elements | Slower (element stays in DOM) |
| Use Case | Elements used occasionally | Frequently toggled elements |
Example:
<p ng-if="isActive">This is conditionally rendered.</p>
<p ng-show="isActive">This is always in the DOM but may be hidden.</p>
ng-if="isActive"→ Completely removes or adds the paragraph.ng-show="isActive"→ The paragraph remains in the DOM but is hidden.
4. Practical Examples
Example 1: Toggle Visibility Using a Button
<!DOCTYPE html>
<html lang="en">
<head>
<title>ng-if 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 Element</button>
<p ng-if="isVisible">This text is conditionally rendered.</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. - If
isVisible = true, the paragraph is added to the DOM. - If
isVisible = false, the paragraph is removed from the DOM.
5. Using ng-if with Buttons
<button ng-click="showText = true">Show</button>
<button ng-click="showText = false">Hide</button>
<p ng-if="showText">This text appears only when "Show" is clicked.</p>
Explanation:
- Clicking “Show” sets
showText = true, adding the paragraph to the DOM. - Clicking “Hide” sets
showText = false, removing the paragraph from the DOM.
6. Using ng-if with Input Fields
<input type="text" ng-model="username" placeholder="Enter your name">
<p ng-if="username">Hello, {{ username }}!</p>
Explanation:
- The paragraph appears only when the user types something.
- If
usernameis empty, the paragraph is completely removed from the DOM.
7. Using ng-if with Arrays and Lists
<ul>
<li ng-if="items.length > 0" ng-repeat="item in items">{{ item }}</li>
</ul>
<p ng-if="items.length == 0">No items available.</p>
Explanation:
- If
items.length > 0, the list is displayed. - If
items.length == 0, the paragraph “No items available” is shown.
8. Performance Considerations
- Use
ng-ifwhen elements are rarely needed. - Use
ng-show/ng-hidefor frequently toggled elements (e.g., modals, notifications). - Removing elements from the DOM can impact performance, especially if they are recreated often.
9. Nested ng-if Directives
<div ng-if="isLoggedIn">
<h2>Welcome, User</h2>
<p ng-if="isAdmin">You have admin access.</p>
</div>
Explanation:
- The
<h2>is displayed only ifisLoggedIn = true. - The
<p>inside it is displayed only ifisAdmin = true.