How to use ng-if directive in Angular

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 be created. As you uncheck, the expression becomes false and the span tag will be removed:

ng-if

The code:

<!DOCTYPE html>
<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>

<style>
.ngif_demo {
  margin-top:30px;
  display:block;
  background: #4C9B79;
  height: auto;
  width:300px;
  border-radius: 10px;
  padding:10px;
  font-size:15px;
  color:#fff;   
}
</style>
</head> 
<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>
</html>

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:

angular ng-if

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:

angular ng-if multiple

The code:

<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style>
.ngif_demo {
  margin-top:30px;
  background: #005555;
  height: auto;
  width:250px;
  border-radius: 10px;
  padding:10px;
  font-size:15px;
  color:#fff;   
}
</style>    
</head>
<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>
</html>

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:

angular ng-if controller

The code:

<!DOCTYPE html>
<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
 
</head> 
<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>
            
</body>
</html>

You can see, the jQuery tab is not visible. The expression used for jQuery in ng-if is set to 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’ expressions are set as true, so those are visible.