The ng-if directive in AngularJS
As using the ng-if directive, an expression is given. If the expression evaluates as false, the HTML element is removed from the DOM. If the expression is true, it will recreate the portion in DOM.
The ng-show and ng-hide directives can also be used to show or hide the specified HTML elements; however, the elements are shown or hidden by using the CSS display property. So, elements remain in the DOM while the ng-if will remove or recreate that HTML element.
The difference will be evident in scenarios like using the CSS pseudo-classes :first-child or :last-child, in which case the position of elements is changed after using the ng-if directive.
Syntax of using the Angular ng-if directive
This is how you may use the ng-if directive:
<div ng-if=”Boolean_expression”></div>
Where, the div can be replaced by other HTML elements like span, paragraph etc.
Read the following section to see ng-if in action where it is used with the <div>, checkbox and other elements.
A demo of angular ngif directive
In this example, a checkbox is used with the ng-if directive. The initial value for the expression is set as false as the web page loads. As you click the checkbox, the expression will become true (as the checkbox is checked) and the span tag inside the div element will create. As you uncheck, the expression becomes false and span tag will remove:
See online demo and code
The code:
<body ng-app=""> Show/Hide span element: <input type="checkbox" ng-model="shspan" ng-init="shspan = false"> <div ng-if="shspan"> <span class="ngif_demo">A demo of ng-if directive in AngularJS</span> </div> </body>
A demo of creating / removing table by using ng-if
In this example of demonstrating the ng-if Angular directive, as you check the checkbox, the HTML table will display (recreate) and hide (remove) as you uncheck the checkbox. For this example, the initial value of the expression is kept true, so checkbox will be checked and table will display, have a look:
See online demo and code
The code:
<body ng-app=""> Show/Hide HTML table: <input type="checkbox" ng-model="shtable" ng-init="shtable = true"> <table ng-if="shtable" class="table table-bordered table-striped"> <tr> <th>ID</th> <th>Name</th> <th>Quality</th> <th>Quantity</th> </tr> <tr> <td>1</td> <td>Wheat</td> <td>Good</td> <td>200 Bags</td> </tr> <tr> <td>2</td> <td>Rice</td> <td>Good</td> <td>250 Bags</td> <tr> <td>3</td> <td>Sugar</td> <td>Good</td> <td>200 Bags</td> </tr> </table> </body>
Get the complete code from the demo page.
An example of using ng-if with multiple conditions
In this example, multiple conditions are used in the ng-if directive. For that, a div is created where ng-if is used like this:
<div class=”ngif_demo” ng-if=”enteredno>0 && enteredno<=5″>
You can see, the condition is set to check a number between 0 and 5. In the example, if you enter a number between 0 and 5, the div element will display. As you enter more or less than this number, the div will disappear or removed from the DOM. Have a look and try different numbers:
See online demo and code
The code:
<body ng-app> <div> Enter a Number betwen 0 and 5 <input type="text" ng-model="enteredno" /> <div class="ngif_demo" ng-if="enteredno>0 && enteredno<=5"> Good! You entered between 0 and 5.</div> </div> </body>
You saw the “AND” operator is used to check the number is between 0 and 5.
A demo of setting true and false in controller
In this demo, the tabs are created by using Bootstrap’s tab component. Initially, four tabs are created, out of which only three are displayed as the demo page loads. The visibility is set by setting the expression of tabs in the Angular controller. Have a look:
See online demo and code
The code:
<body ng-app="">
<ul class="nav nav-tabs" ng-controller="tabcontroller" ng-app>
<li class="active" ng-if="Hometab" ><a href="https://www.jquery-az.com/">Home</a></li>
<li><a ng-if="jQuerytab" href="https://www.jquery-az.com/jquery-tips/">jQuery</a></li>
<li><a ng-if="Bootstraptab" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap</a></li>
<li><a ng-if="AngularJStab" href="https://www.jquery-az.com/angularjs-tutorials/">AngularJS</a></li>
</ul>
<script>
function tabcontroller($scope) {
$scope.Hometab = true;
$scope.jQuerytab = false;
$scope.Bootstraptab = true;
$scope.AngularJStab = true;
}
</script>
You can see, the jQuery tab is not visible. The expression used for jQuery in ng-if is set false in controller:
$scope.jQuerytab = false;
This is the markup for jQuery tab:
<li><a ng-if=”jQuerytab” href=”https://www.jquery-az.com/jquery-tips/”>jQuery</a></li>
Similarly, other tabs expression are set as true, so those are visible.